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