目 次 |
● 基本構造 | <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> | フレーム未対応ブラウザでの表示
フレームの例 |
特殊文字 |
文字 | 文字名 | 文字コード |
---|---|---|
" | " | " |
& | & | & |
< | < | < |
> | > | > |
スペース | |   |
© | © | © |
この一覧について |