基本的なHTMLタグ


HTMLとは
HyperText Markup Language
ハイパーテキストとは、関連した情報があるもの同士をリンクして、次々にたどっていけるテキストのことです。

HTMLは、WEBサイトを作成するためのプログラムの記述方法です。
『タグ』と呼ばれる処理方法を指定するための文字列を入力し、ページを構築していきます。
NetscapeやInternet Explorerといったブラウザは、タグを解釈して画面に表示するアプリケーションです。

HTMLを作成するアプリケーションが使うことができれば、タグを知らなくてもWEBページを作成できますが、トラブルやエラーが発生した場合には、タグを修正しなければいけないこともありますので、基本的なタグは覚えておきましょう。

ちなみに、HTMLを作成するアプリケーションには、ホームページビルダー・GoLive・Dreamweaverなどがありますが、それぞれのアプリケーションにより癖があります。複数のアプリケーションでページを修正すると、不要なタグが残ってエラーが発生することもあるので、注意してください。
●ホームページビルダー/個人ユーザー・初心者向け
●GoLive/複数のユーザーで使うための機能があり、制作会社でも使われる
 デフォルトで外部スタイルシートが適用される仕組み
●Dreamweaver/複数のユーザーで使うための機能があり、制作会社でも使われる
 あまり癖がなく、一番普及しているアプリケーション


HTMLを構成するタグ

<html> 〜 </html> HTMLのソース
<head> 〜 </head> ヘッダー情報
<title> 〜 </title> ページのタイトル(ブラウザのタイトルバーに表示される)
<!-- 〜 --> コメント(ブラウザには表示されない)
<meta> ページの付加情報(終了タグなし)
文字コードの設定など
<body> 〜 </body> ページの本文(ブラウザに表示される部分)

bodyに付けられる属性
(スタイルシートで一括管理することが多い)
bgcolor ページの背景色
background ページの背景画像(タイリングされる)
text 文字色
link リンク部分の色
alink 読み込み中のリンク色
vlink 訪問済みのリンク色
leftmargin ページ左側の余白
topmargin ページ上側の余白


テキストを管理するタグ

<p> 〜 </p> 段落。(段落の上下には空間ができる)
<h*> 〜 </h*> 見出し。h1からh6まである。(見出しの上下には空間ができる)
<font> 〜 </font> 文字の設定。(サイズ、色、フォントの種類を指定)

fontに付けられる属性
size 文字サイズ 指定がなければ3
1から7までのサイズか、-7から+7までの数値で表される
face フォントの種類を指定
color 文字の色
<b> 〜 </b> 太字
<i> 〜 </i> 斜体
<s> 〜 </s> 抹消線
<u> 〜 </u> アンダーライン
<pre> 〜 </pre> スペースや改行などの記号をそのまま表示


レイアウトを管理するタグ

<div> 〜 </div> タグ内をまとめて位置指定

divに付けられる属性
align 位置を指定 left/right/center
<center> 〜 </center> タグ内をまとめて中央寄せ
<br> 改行(終了タグなし)
<hr> 水平線(終了タグなし)

hrに付けられる属性
align 位置を指定 left/center/right
size 太さをピクセル指定
width 幅をピクセルかパーセントで指定
noshade 影なし
<table> 〜 </table> 表組み(trとtdを中に入れる)

tableに付けられる属性
width テーブルの横幅をピクセルかパーセントで指定
height テーブルの高さをピクセルかパーセントで指定
border 枠線の太さをピクセルで指定・0で枠線なし
bordercolor 枠線の色
bgcolor テーブルの背景色
background テーブルの背景画像
cellpadding セル内側の余白をピクセルで指定
cellspacing セル間の余白
align テーブルの位置を指定 left/center/right
<tr> 〜 </tr> 表組みの行(tdを中に入れる)

trに付けられる属性
bgcolor 行の背景色
background 行の背景画像
align 行単位で位置を指定(横) left/center/right
valign 行単位で位置を指定(縦) top/middle/bottom
<td> 〜 </td> 表組みのセル(ここに文字や画像が入る)

tdに付けられる属性
width セルの横幅をピクセルかパーセントで指定
height セルの高さをピクセルかパーセントで指定
bgcolor セルの背景色
background セルの背景画像
nowrap セル内改行禁止
align セル内の位置を指定(横) left/center/right
valign セル内の位置を指定(縦)  top/middle/bottom
colspan セルを横方向に結合(結合数を指定)
rowspan セルを縦方向に結合(結合数を指定)


画像を表示するタグ

<img> 画像を表示する(終了タグなし)

imgに付けられる属性
src 画像のパス(住所)を指定
alt 画像の代替え文字
width 画像の横幅
height 画像の高さ
border 画像の枠線をピクセルで指定


リンクをはるタグ

<a> 〜 </a> リンクをはる

aに付けられる属性
href リンク先のパス(住所)を指定
target リンク先を表示するウィンドウを指定
_blank 新しいウィンドウで表示
_self 同じウィンドウ・フレームに表示
_top 全ウィンドウに表示
_parent 親フレームに表示
フレーム名 指定のフレームに表示
name アンカーポイント名(ページ内リンク)


マップ用のタグ(クリッカブルマップ)

<map> クリッカブルマップ

mapに付けられる属性
name マップ名
<area> マップのリンク領域

areaに付けられる属性
shape リンク領域の形状
circle 円形
rect 四角形
poly 多角形
coords リンク領域の座標
href リンク先のパス(住所)を指定
target リンク先を表示するウィンドウを指定
_blank 新しいウィンドウで表示
_self 同じウィンドウ・フレームに表示
_top 全ウィンドウに表示
_parent 親フレームに表示
フレーム名 指定のフレームに表示
alt リンク領域にマウスカーソルを置いた時に表示される文字
<img> マップイメージに付けられる属性
usename マップ名
border 画像の枠線をピクセルで指定・0で枠線なし



copyright(c)2006 ToyokoKanetaka All Right Reserved