SAK 図書館

SAK Streets メインストリート 図書館・カフェ 一覧 SAK Streets 検索
| VB | SQL | Perl | PHP | ASP | JSP | C | PC | HP | FAQ | フリーソフト |

ホームページ作成 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 編資料
| VB | SQL | Perl | PHP | ASP | JSP | C | PC | HP | FAQ | フリーソフト |

SAK Streets メインストリート 図書館・カフェ 一覧 SAK Streets 検索



Copyright (C) 1999-2017 Y.SAK