SAK 図書館
SAK 図書館
ホームページ作成 HTML 編 (その三) IMG、TABLE、TR、TD、FORM
■<IMG> タグ
・画像ファイルを表示する。
width と height を省略すると、表示時に自動調整される。
src に、CGI を指定して、アクセスカウンタ表示などにも使用できます。
<IMG src="../w_img/sak3logo.gif" align="left" width="96" height="32" border="0" alt="文字">
| | | | | |_ 画像が表示されるまでの間に見える文字
| | | | |_ 0 枠なし
| | | | 1 以上 (枠の太さ)
| | | |_ 画像の高さ (ピクセル)
| | |_ 画像の幅 (ピクセル)
| |_ テキストとの配置
| left 画像が左、その右にテキスト
| right 画像が右、その左にテキスト
|_ 画像への URL
・lowsrc= では、容量の少ないプレロード画像を指定できる。
2 段階表示である。
<IMG src="../w_img/sak3logo.gif" lowsrc="../w_img/sak3logo_low.gif">
| |_ プレロードする軽い画像
|_ 本ロードする画像
■<TABLE> タグ
・格子状のテーブルを作成する。
たいへん便利なのだが、テーブルは全データがセットされてから一気に表示
される。あまり大きいテーブルは、恐ろしく表示に時間が必要となる。
テーブルのサイズ指定でも絶対値指定は避けた方が良い。
<TABLE>
<TBODY>
<TR>
<TD>1-1 データ</TD>
<TD>1-2 データ</TD>
</TR>
<TR>
<TD>2-1 データ</TD>
<TD>2-2 データ</TD>
</TR>
</TBODY>
</TABLE>
<TABLE width="100%" border="0" cellPadding="3" cellSpacing="0">
| |_ 境界線なし
|_ ブラウザ幅 100% にテーブルを表示
省略すると、可変幅になる
<TABLE width="100%" border="1" bordercolordark="White" bordercolorlight="#97846a" cellPadding="2" cellSpacing="0">
| |_______________________|_ 盛り上がりタイプ
|_ 境界線あり
<TABLE width="100%" bgcolor="#97846a" border="0" cellPadding="3" cellSpacing="2">
| |_ 境界線なし (フラットタイプ)
|_ 背景カラー
<TR bgcolor="#97846a">
|_ 行カラー
<TD bgcolor="#97846a">
|_ セルカラー
<TD nowrap>
|
|_ ワードラップ禁止
<TD colspan="2">
|_ セル結合数(横)
<TD rowspan="2">
|_ セル結合数(縦)
■<FORM> タグ
・CGI プログラムへの入力フォームとしてよく使用する。
テキスト入力項目、選択項目、サブミットボタンなどの部品がある。
<FORM action="w_s3rbfm.cgi" id="FORM1" method="post" NAME="FORM1">
<INPUT TYPE="hidden" NAME="re" VALUE="0">
お名前
<INPUT id="text1" NAME="text1" type="text" size="22" maxlength="40" value="ゲスト"><BR>
選択
<SELECT id="select1" name="select1">
<OPTION value="01" selected>01</OPTION>
<OPTION value="02">02</OPTION>
</SELECT><BR>
<INPUT id=submit1 NAME=submit1 type=submit value=" 発言 ">
<INPUT id=reset1 NAME=reset1 type=reset value="リセット">
</FORM>
<FORM action="w_s3rbfm.cgi" id="FORM1" method="post" NAME="FORM1">
|_ submit ボタンで呼び出す CGI プログラム
<INPUT TYPE="hidden" NAME="re" VALUE="0">
| | |_ 固定値
| |_ CGI プログラムで識別する項目名
|_ hidden は、非表示項目
<INPUT id="text1" NAME="text1" type="text" size="22" maxlength="40" value="ゲスト">
| | | | |_ 初期値
| | | |_ 最大文字数
| | |_ テキストボックスの幅
| |_ テキスト入力項目
|_ CGI プログラムで識別する項目名
<SELECT id="select1" name="select1">
|_ CGI プログラムで識別する項目名
<OPTION value="01" selected>01</OPTION>
| | |_ 選択項目名
| |_ 選択状態
|_ CGI に渡す値
<INPUT id=submit1 NAME=submit1 type=submit value=" 発言 ">
| |_ ボタンキャプション
|_ サブミットボタン
<INPUT id=reset1 NAME=reset1 type=reset value="リセット">
| |_ ボタンキャプション
|_ リセットボタン
■ホームページ作成 HTML 編資料
■企業サイト、商用サイト作成編資料
■ホームページ作成 設計編資料
■ホームページ作成 JAVA Script 編資料
Copyright (C) 1999-2018 Y.SAK