| 目 次 |
| ● 基本構造 | <html> <head> <body> <!-- --> 基本構造の例 BODY タグ設定例 カラーサンプル |
| ● ヘッダー | <title> <isindex> <base> <meta> <link> <script> META タグの例 |
| ● ページレイアウト | <hn> <hr> <br> <p> <center> <div> <pre> <blockquote> <address> <noscript> ページレイアウトの例 |
| ● フォント | <font> <basefont> <i> <tt> <b> <u> <strike><big> <small> <sub> <sup> <em> <strong> <code> <samp> <kbd> <var> <cite> FONTタグの例 |
| ● リスト | <ul> <ol> <li> <dl> <dt> <dd> リストの例 |
| ● 表 | <table> <tr> <th> <td> <caption> 表の例 |
| ● ハイパーリンク | <a> ハイパーリンクの例 |
| ● イメージ | <img> <map> <area> <IMG>タグのオプション解説 クリッカブル・マップの例 |
| ● フォーム | <form> <input> <select> <option> <textarea> フォームの例 |
| ● JAVA | <applet> <param> |
| ● フレーム | <frameset> <frame> <noframes> フレームの例 |
| ● 特殊文字 | "e; & < > © |
| ● この一覧について |
| 基本構造 |
| <html> </html> | HTML文書 |
| <head> </head> | ヘッダー |
| <body> </body> | ボディ(本文)文書全体のデザインを設定
background="filename" 背景のタイルイメージを指定
bgcolor =#rrggbb or colorname 背景の色
text =#rrggbb or colorname テキストの色
link =#rrggbb or colorname リンクの色
vlink =#rrggbb or colorname アクセス済みのリンク色
alink =#rrggbb or colorname アクセス中のリンクの色
onLoad =code HTMLファイルの読み込み完了時に実行するイベントハンドラ
onUnload =code HTMLファイルの表示終了時に実行するイベントハンドラ
|
| <!-- --> | 注釈(コメント) |
|
基本構造の例 BODYタグ設定例 カラーサンプル |
| ヘッダー HEADER |
| <title> </title> | タイトル |
| <isindex> </isindex> | キーワード検索 prompt="キーワード入力ボックスのプロンプト" action="CGIプログラムのURL" |
| <base> </base> | 基準URL 相対パスのURLは,ここでの設定が基準となる
href="基準となるURL"
target="表示先の基準となるフレーム名" |
| <meta> </meta> | 文書情報
http-equiv="Content-Type" MIMEタイプ,文字コードセットを指定
expires 文書の有効期限を指定
keywords 文書のキーワード
refresh 文書の自動読み込み設定
name= "author" 著者
keywords キーワード
description 文書内容
robots 検索ロボットの制御
content= "DATA" http-equiv, name のプロパティ指定(必須)。データの区切りは";"
|
| <link> </link> | 文書の前後関係などを定義 href=url rel=link_type 複数文書間の順方向の関係を定義 rev=link_type 複数文書間の逆方向の関係を定義 type= スタイルシートの形式 |
| <script> </script> | 使用するスクリプト言語を宣言する
language = JavaScript , VBScript など |
META タグの例 |
| ページレイアウト関連 |
| <hn> </hn> | 見出し文字(n=1 最大 〜 n=6 最小) |
| <hr> | 横罫線を引く width = n, n% 線の長さ(pixel or %) size = n 線の太さ(pixel) align = left , center , right noshade 平面的に表示 |
| <br> | 強制改行 clear = all , left , right イメージに対するテキストの回り込みを解除する |
| <p> </p> | 段落 align = left, center, right |
| <center> </center> | センタリング |
| <div> </div> | 分割テキスト(左・中央・右揃え) align = left, center, right |
| <pre> </pre> | 整形済みテキスト(改行やタブをそのまま表示) |
| <blockquote> </blockquote> | ブロック引用(上下に空白行,左右がインデントされる) |
| <address> </address> | アドレス情報(イタリック体で表示される) |
| <noscript> </noscript> | スクリプト言語未対応ブラウザで表示される範囲を指定 |
ページレイアウトの例 |
| フォント関連 |
| <font> </font> | フォント size=n 最大はn=7 size=±n basefontに対する相対値 n=1〜6 color=#rrggbb, colorname フォント色指定 |
| <basefont> | ベースフォント size = n |
| <i> </i> | イタリック体 |
| <tt> </tt> | 等幅フォント |
| <b> </b> | ボールド |
| <u> </u> | アンダーライン |
| <strike> </strike> | |
| <big> </big> | 大きめのフォント |
| <small> </small> | 小さめのフォント |
| <sub> </sub> | 下付文字 H2O |
| <sup> </sup> | 上付文字 x2+y2=9 |
| <em> </em> | 強調文字 |
| <strong> </strong> | 強い強調 |
| <code> </code> | プログラムコード PROGRAM CODES |
| <samp> </samp> | USED FOR SAMPLE OUTPUT |
| <kbd> </kbd> | KEYBOARD TYPED |
| <var> </var> | 変数名 variables |
| <cite> </cite> | 引用 used for citations |
| リスト(箇条書き) |
| <ul> </ul> | 番号なしリスト Unnumbered List type=disk, circle, square 行頭記号の種類設定 |
| <ol> </ol> | 番号付きリスト Ordered List type=1, a, A, i, I 行頭番号の種類設定 start=n 開始番号(数値) |
| <li> </li> | リスト項目 type=disk, circle, square (<ul> </ul>の場合のみ) type=1, a, A, i, I (<ol> </ol>の場合のみ) value=n 開始番号(数値) |
| <dl> </dl> | 定義型リスト Definition Lists |
| <dt> </dt> | 定義語 Term name |
| <dd> </dd> | 定義内容 Term Definition |
リストの例 |
| 表(TABLE) |
| <table> </table> | 表組み align=left, center, right border=n 表の外枠の太さ(pixel default:1) width=n, n% 表の幅(pixel or %) height=n, n% 表の高さ(pixel or %) cellspacing=n 表の枠の太さ(pixel default:2) cellpadding=n 枠と文字の間隔(pixel default:1) |
| <tr> </tr> | 表の行 align=left, center, right 左右の配置 valign=top, middle, bottom 上下の配置 |
| <th> </th> | 表の見出し要素(字体がボールドになる)
width=n セルの幅
height=n セルの高さ
rowspan=n 複数行にまたがるセルの指定
colspan=n 複数列にまたがるセルの指定
nowrap セル内折り返し禁止
align=left, center, right 左右配置(default:center)
valign=top, middle, bottom 上下配置(default:middle)
bgcolor=#rrggbb , colorname セルの背景色 |
| <td> </td> | 表のデータ要素
width=n セルの幅
height=n セルの高さ
rowspan=n 複数行にまたがるセルの指定
colspan=n 複数列にまたがるセルの指定
nowrap セル内折り返し禁止
align=left, center, right 左右配置(default:left)
valign=top, middle, bottom 上下配置(default:middle)
bgcolor=#rrggbb , colorname セルの背景色 |
| <caption> </caption> | 表題 align=top, bottom (default:top) |
| 表の例 |
| ハイパーリンク |
| <a> </a> | アンカー Anchor
href="url" リンク先のURL
href="#marker_name" ページ内のアンカーに飛ぶ
href="mailto:your@mail.address" メール機能呼び出し
name="marker_name" ページ内にアンカーを設定
target=frame_name 表示するフレームを指定
target=top 別ウィンドウを開いて表示
target=_top フレームを解除して表示
ハイパーリンクの例 |
| イメージ(画像)関連 |
| <img> | イメージ Inline Image
src="url" 表示するイメージのURL
alt="text" 画像を表示できないときの説明
align=top テキストを画像の上端に合わせる
middle 中央に
bottom 下端に
left 画像を左に配置しテキストを回り込ませる
right 右に配置し
width=n, n% 画像の幅
height=n, n% 画像の高さ
border=n 枠線の太さ
hspace=n 画像左右のスペース
vspace=n 画像上下のスペース
usemap=url#map_name クライアントサイド・イメージマップ
ismap=url#map_name サーバーサイド・イメージマップ |
| <map> </map> | イメージマップの指定 name=map_name(必須 usemapで指定したmap_name) |
| <area> | イメージマップデータ <map> </map>内でリンク先を指定
shape=rect リンク領域形状 四角形
circle 円形
poly 多角形
coords="x1,y1,x2,y2" 四角形の場合”左上と右下の座標”
"x,y,r" 円形の場合 ”中心の座標,半径”
"x1,y1,x2,y2,.." 多角形の場合左上から反時計回りに頂点の座標
href="url" 指定したareaでのリンク先
alt="text" イメージの内容を記述
<IMG>タグのオプション解説 クリッカブル・マップの例 |
| フォーム |
| <form> </form> | フォーム
action="処理するCGIプログラムのURL"
="mailto:address"
method="POST", "GET"
enctype="multipart/form-data"
内容を文字コードに合わせてエンコードして送信 |
| <input> | 入力エリアの作成
type=text テキストフィールド(デフォルト)
password パスワードフィールド
checkbox チェックボックス
radio ラジオボタン
submit 送信ボタン
image グラフィカル送信ボタン
reset リセットボタン
file ファイル名入力
hidden 隠蔽フィールド
name= 入力フィールド名
value= データのデフォルト値,ボタン名
checked type=checkbox, radio のデフォルトチェック
size=n type=text, file の入力フィールド幅 (default:20)
maxlength=n type=text, password 時に入力できる最大文字数
src=url グラフィカル送信ボタンのイメージURL
align=top, middle, bottom, left, right
グラフィカル送信ボタン時のテキスト配置 |
| <select> </select> | 選択メニュー name= selectメニュー名(必須) size=n 複数表示時の行数 multiple 複数項目の選択を許可 |
| <option> </option> | <select> </select>内で選択項目を指定 selected デフォルトで選択された状態にしておく value="text" 選択項目の代わりに送信したいデータ |
| <textarea> </textarea> | 複数行テキスト入力フィールド
name= テキストフィールド名
rows=n 縦サイズ(行数)
cols=n 横サイズ(1行文字数)
wrap=soft 横サイズに合わせて改行(画面表示のみ)
hard 横サイズに合わせて改行(送信時に改行コード付加)
off 改行なし(デフォルト)
フォームの例
|
| JAVA |
| <applet> </applet> | Java Appletの設定 codebase="Java AppletのURL" code="Java Appletのclassファイル" (必須) alt="Java未対応ブラウザ用代用テキスト" name="Java Applet名" width=n, n% (必須) height=n, n% (必須) align=top, middle, bottom, left, right hspace=n vspace=n |
| <param> </param> | Java Appletのパラメータ name="パラメータ名" (必須) value="パラメータの値" |
| フレーム(HTML3.2には含まれません) |
| <frameset> </frameset> | フレーム設定
rows="n1,n2,*" フレームの高さ(pixel)
"n1%,n2%,*" (%) *は残りの割合
cols="n1,n2,*" フレームの幅(pixel)
"n1%,n2%,*" (%)
frameborder=yes, no (default:yes) |
| <frame> </frame> | フレームに表示するデータを設定
src="フレームに表示するデータのURL"
name="フレーム名"
marginwidth=n フレーム内左マージン(pixel)
marginheight=n フレーム内上マージン(pixel)
scrolling=yes, no, auto スクロールバーの表示(default:auto)
noresize フレームサイズを固定 |
| <noframes> </noframes> | フレーム未対応ブラウザでの表示
フレームの例 |
| 特殊文字 |
| 文字 | 文字名 | 文字コード |
|---|---|---|
| " | " | " |
| & | & | & |
| < | < | < |
| > | > | > |
| スペース | |   |
| © | © | © |
| この一覧について |