Useful HTML Tag List (12/02/99)

Back to: Comp Home




<body> HTML本文の宣言
属性: bgcolor="color"(背景の色); background="url"(背景に使う画像); text="color"(文字の色); link="color"(リンクの色); vlink="color"(訪れたリンクの色); alink="color"(クリック中のリンクの色)

< !- -- - > コメント
< !- - と - - >の間に書かれた文字はブラウザーに表示されないので、秀丸で参照するときだけ読めるメモなどを書いておけます。例:< !- -ここから本文が始まる- - >

文字装飾関係のタグ
<b>文字</b>太字(ブロック体)
<i>文字</i>イタリック体
<u>文字</u>下線(アンダーライン)
<font>文字</font>:文字の大きさ、色、書体を変更する。
属性: size="1〜7" (大きさ); color="color"(色); face="フォント名" (書体)

段落、文字列表示位置など
<p>文字列や画像など</p>: 段落の作成
属性: align="left/center/right" により左寄せ、中央、右寄せが指定できる

<br>: 改行(<br><br> のように2個つづけると<p>と同じく1行あけになる)

<hr>: 水平線(次行参照)
属性: size="n" (太さを数字で指定); width="n/n%"(幅を数字、または%で指定); align="left/center/right" (表示位置を指定); noshade (陰・立体感を消す)
例: <hr size="10" width="50%" align="right">と指定すると次行のようになる

<blockquote>文字列</blockquote>: 引用段落の作成。例:
(このタグで囲んだ範囲が引用であると宣言します。このタグで囲まれた範囲は上下、左右にスペースがとられて表示されます。

<pre>文字列</pre>: 整形済みテキストの指定。例:
       
                    (このタグで囲んだ範囲が整形済みの文書である
                     と宣言します。このタグで囲まれた範囲はHTML
                     では無視されてしまう半角スペースが表示され、
                     字詰めが行われません。)
       
画像関係
<img src="file name/url">: 画像を貼り込む
属性: width="n/n%" (ピクセル数や%で表示幅の指定); height="n/n%"(ピクセル数や%で高さの指定); alt="text"(画像を表示させなかったときの文字列を指定); border="n"(画像の周囲に入る線の太さをピクセル数で指定します。border="0"とすると線が消えます)

<img src="file name/url" align="left/right">: 貼り込んだ画像の右または左にテキストを回り込ます
例:
画像を左、または右に寄せ、その横に文字を回り込ませます。この例では<img src="dbaby.gif" align="left"><br>と記述した後に、このパラグラフを書いています。
回り込みを途中で解除するには、clear属性のついた<br clear="all/left/right">タグを使用します。それぞれ、両方/左/右側にある画像の回り込みを解除し、画像の終わりから次の行を始めます。<br clear="left">とこの後に記述すると
このようになります。ちょっと複雑ですが、自分で試してみると理解できると思います。
周囲のテキストとの間隔は<img src="file name/url" vspace="n" hspace="n">のように画像の上下の間隔(vspace)、左右の間隔(hspace)をピクセル数で指定することもできます。

リンク関連タグ
<a href="file name/url">文字列/画像</a> ハイパーリンクを貼る

<a name="name">文字列/画像</a> アンカーを置く
<a href="#name">文字列/画像</a>と組み合わせて、非常に長いホームページ内で使います。スクロールしないで、「アンカー」と呼ばれる同一ページ内のジャンプ先に飛ぶことができます。
例:下のリンクをクリックしてみて下さい
本文 段落 画像 リンク
「本文」をクリックするとこのページ最初の<body>の行にジャンプします。これは上の4個のリンク(次のように記述されています):

<a href="#body">本文</a> <a href="#para">段落</a> <a href="#image">画像</a> <a href="#link">リンク</a>

に対応して、このページ最初の<body>の行に <a name="body"><b><body></b> HTML本文の宣言</a>という「アンカー」が置いてあるからです。「段落」、「画像」、「リンク」の行にどのような「アンカー」が置いてあるかは「ソース」クリックして見て下さい。ちょっと複雑かも知れませんが、慣れればとても便利なタグです。実際の使用例はこのホームページ内にあるLinksページを参照して下さい。
そのページにある [Top] [Search Engines] [Literary Resources] [ESL Resources] [End]
をクリックするとアンカーが置いてある行にジャンプすることが分かると思います。

<a href="mailto:メールアドレス">文字列</a> メールを発信させる
例:
<a href="mailto:shimada@dokkyo.ac.jp">shimada</a>
shimadaのように使います。(残念ながら、学内のコンピュータ室のパソコンではこのリンクをクリックしてもメールを発信させることができません)

この他に「リスト」や「テーブル」タグが初心者・中級者向けありますが、それはリンク先を参照して下さい。