PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

かずひろいとえ
7 years ago
Views:

1 HTMLガイダンス 1

2 HTMLを用いたUI 設定 2 色々な見え方で画面に表示されるWebページ全て文字 /キャラクタで表現されたデータの集まり HTML(Hyper Text Markup Language) パソコン等のインターネット端末のブラウザソフトで文書情報を表示するときに用いられるプログラム言語の一種でマークアップ言語と言ってタグを使って文字の大きさや各種属性等の指定画像ファイルを文書に埋め込む指定他の文書へのリンク等様々な機能を持っています標準のHTMLのみで作成できるユーザインタフェース(UI)の表現には限界 / 制約がありますのでその事を十分に理解したうえで UIを設計することになります

3 一般的なHTMLソース 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=shift_jis"> <META http-equiv="content-style-type" content="text/css"> <TITLE>ホームページタイトルSDEV</TITLE> </HEAD> <BODY bgcolor="#ebf5f5" text="#333333" link="#003399" vlink="#990033" alink="#339900"> <CENTER> <FONT color="red" size="+1"> 取り扱い注意 </FONT> <TABLE width="95" border="0" height="65" class="index" bgcolor="#ebf5f5"> <TBODY> <TR align="center"> <TD height="10" align="center"><a href="index.htm" target="_parent"> <IMG alt="トップアイコン" width="48" height="48" align="middle" border="0" src="img/stp.gif"> はじめに </A></TD> </TR> <TR> <TD bgcolor="#660000"> </TD> </TR> <TR align="center"> <TD height="10" align="center"><a href="contents/sdev/index1.htm" target="contents"> 第 1 回 </A> (9/29) </TD> </TR> : : : : <TR> <TD bgcolor="#660000"> </TD> </TR> <TR> <TD align="center" bgcolor="#660000"></td> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> IE 等のWebブラウザでソースを表示して確認メニューバーの[ 表示 ] [ソース] またはマウスの右クリックソースの表示をクリックする HTMLソース文字データは HTML という言語で記述

4 HTML 基本構造タグとフォーム 4 HTMLファイルは <HTML>タグ <HEAD>タグ <BODY>タグといった基本構造を持つ <BODY>~</BODY> 部にブラウザに表示する内容をタグを用いて表現 (HTMLをコーディングする) ユーザ入力を行う様な画面を造る際にはフォームを<FORM>タグを用いるこれらも<BODY> 部に記述するメモ帳などのテキストエディタを用いて作成保存する基本構造タグ <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> ブラウザに表示する内容 <FORM> フォーム定義 </FORM> </BODY> </HTML> <html> <head> <title> </title> </head> <body> <form> </form> </body> </html> タグは大文字も小文字も同様の動作を行う

5 フォントタイトル文字 <FONT SIZE="4" COLOR="#990000"> 情報システム開発演習 </FONT> 文字フォントサイズや色を指定します設定は <FONT>タグを用いる 5 属性名初期値内容書式 <font>~</font> size color なしなし文字サイズを指定 1~7 段階で指定 1が最小 7が最大 -7や+5のように符号で相対変更でき文字の色を指定指定には2 通りの方法あり 1RGB( 光の3 原色 )を00~ff(16 進数 )の256 段階表記 00が一番暗い ffが明るい例えばが黒, ff0000 が赤, ffffff が白色の指定では6 桁の数字の先頭に#を付けた形で表記例 : color="#123456" 2 色の名前を書く例えば color= white のように書くわかりやすい反面使える色の名前を知っておく必要あり face なし書体を指定します id なし IDを指定します class なしスタイルシートクラスを指定します style なしスタイルシートを指定します lang 環境に依存言語を指定します

6 リンクアンカー 6 リンク <A HREF=" target="_blank"> 経営工学システム工学実験演習 </A> リンクを設定するには <A>タグを用いる HREF 属性はリンク先 URL を指定する属性名初期値内容書式 <a href="url">~</a> <a name="アンカー">~</a> <a href="url" target="ターゲット"> ~</a> href なしリンク先のURLを指定します name なし同じページ内へのリンク位置を示すアンカーを指定します target なし指定されたターゲットウィンドウへリンク先のページを表示します以下は予約されたtarget 名です _self: 自分自身 _blank: 空白ページ _parent: 親フレーム _top:トップフレームを示します id なし IDを指定します class なしスタイルシートクラスを指定します style なしスタイルシートを指定します

7 テーブル <TABLE BORDER= 2 > <TR> <TD> 回 </TD> <TD>タイトル</TD> </TR> : </TABLE> 7 書式 <table>~</table> 書式 <td>~</td> 書式 <tr>~</tr> テーブル構造は<TABLE>タグを基本に各セルを<TR>タグ <TD>タグの組み合わせで作成する主なオプション( 抜粋 ) <TR> 行を指定 <TR> 行を指定 <TABLE> 表を指定属性名初期値内容 border なし枠幅を指定します bgcolor なし背景色を指定します <TABLE> <TD> 列を指定 align なし回り込み方法を指定します width なし横幅を指定します height なし縦幅を指定します background なし背景画像を指定します id なし IDを指定します <TD> 列を指定 <TR> <TD> 回 </TD> <TD>タイトル</TD> </TR> <TR> <TD> ~ </TD> class なしスタイルシートクラスを指定します style なしスタイルシートを指定します <TD> ~ </TD> </TR> </TABLE>

8 イメージ画像 8 イメージ画像を配置するには <IMG>タグを用いる書式 <img src="url"> 画像貼付 <IMG SRC="logo.jpg" HEIGHT="40" WIDTH="600" ALT=" 経営システム工学科ロゴ"> 属性名初期値内容 src なし表示する画像のURLを指定します width なし画像の横幅を指定します height なし画像の縦幅を指定します alt なし代替テキストを指定します border なし枠幅を指定します id なし IDを指定します class なしスタイルシートクラスを指定します style なしスタイルシートを指定します name なし名前を指定します dynsrc なし表示する映像のURLを指定します (IE) align なし回り込み方法を指定します hspace なし回り込み指定時の横方向の間隔を指定します vspace なし回り込み指定時の縦方向の間隔を指定します usemap なしクライアントサイドクリッカブルマップを指定します ismap なしサーバーサイドクリッカブルマップを指定します

9 フォーム書式 <form>~</form> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> フォーム内容 </FORM> 9 ブラウザに表示されたWebページから情報を書き込む( 入力 )ためには <FORM>タグを用いる ACTION 属性は入力されたデータの送信先 URLを指定する METHOD 属性には送信方法はpostまたはgetが指定できます一般的にはpostを指定します get を指定した場合 URLの後に?で区切られデータが送信されますフォームから情報を書き込むには <INPUT>タグ入力フィールド <TEXTAREA>タグテキストボックス <SELECT>タグ選択リストなどを組み合わせて使用する ( 後述 ) 属性名初期値内容 action なしデータの送信 URLを指定します method get 送信方法を指定します (getまたはpost) id なし IDを指定します class なしスタイルシートクラスを指定します style なしスタイルシートを指定します enctype なし MIMEタイプを指定します target なしターゲットを指定します

10 入力フィールド <INPUT>タグ type 属性名初期値内容なし name なし名前を指定しますエレメントの種類を指定します text 1 行のテキストフィールド password パスワード入力した文字は*やなどで隠される hidden 隠しデータ表示されませんがデータは送信される checkbox チェックボックス選択肢の中から複数選択する場合 radio ラジオボタン選択肢の中から1つだけ選択する場合 submit 送信ボタン button コマンドボタン reset リセットボタンクリックすると初期状態 image 画像ボタン submitボタンと同じ働き(クリック時のボタン座標も送信 ) file ローカルファイルの選択ファイル選択ダイアログが表示される value なし値を指定します VALUE 属性で指定した内容が固定値として送信される size なし表示幅 ( 半角文字数換算 )を指定します maxlength なし入力可能文字数 ( 半角文字換算 )を指定します checked --- チェック状態を指定します id なし IDを指定します class なしスタイルシートクラスを指定します style なしスタイルシートを指定します alt なし代替テキストを指定します align なし回り込み方法を指定します src なし画像 URLを指定します readonly --- 読み出しのみの状態を指定します disabled --- 禁止状態を指定します 10

11 1 行テキストフィールド <INPUT TYPE="text"> 入力フィールド <INPUT TYPE="text" NAME="field1" SIZE="30" MAXLENGTH="50"> 11 <INPUT TYPE= password"> 1 行の文字列を入力するには <INPUT TYPE= text >タグを用いる Name 属性はフィールドを一意に識別するために指定するパスワード入力フィールド <INPUT TYPE="password" NAME="field2" SIZE="10" MAXLENGTH="10"> 1 行の文字列でパスワードなどの入力値を隠す場合の情報を入力するには <INPUT TYPE= password >タグを用いる入力した文字は*やなどで隠される隠しフィールド <INPUT TYPE= hidden"> 隠しフィールド <INPUT TYPE="hidden" NAME="hidden1" value="サンプルフォーム"> 一般にユーザに見せる必要のない特定の値をCGIプログラムに送信するには <INPUT TYPE= hidden > タグを用いる

12 チェックボックス 12 チェックボックス <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="c1" CHECKED>チェックボックス1 <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="c2">チェックボックス2 <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="c3">チェックボックス3 複数の選択肢から複数選択するには <INPUT TYPE= checkbox >タグを用いる NAME 属性は共通の項目に対する選択肢として使用する場合はすべて同じ名前を指定する VALUE 属性は選択肢を一意に識別するための名前を指定するため必ず指定するようにする CHECKED 属性は既定値として設定されるラジオボタンラジオボタン INPUT TYPE="radio" <INPUT TYPE="radio" NAME="radio1" VALUE="r1" CHECKED> 選択肢 1 <INPUT TYPE="radio" NAME="radio1" VALUE="r2"> 選択肢 2 <INPUT TYPE="radio" NAME="radio1" VALUE="r3"> 選択肢 3 複数の選択肢から1つだけ選択するには <INPUT TYPE= radio >タグを用いる NAME 属性は共通の項目に対する選択肢として使用する場合はすべて同じ名前を指定する VALUE 属性は選択肢を一意に識別するための名前を指定するため必ず指定するようにする CHECKED 属性は既定値として設定される

13 コマンドボタンフォーム内のデータを送信する 13 <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ コマンドボタン <INPUT TYPE="submit" value=" 送信 "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ ボタン <INPUT TYPE="button" value=" ボタン "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ リセットボタン <INPUT TYPE="reset" value=" リセット "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> ~ ローカルファイル選択ボタン <INPUT TYPE="file" value=" ファイル選択 "> </FORM> <FORM ACTION="/cgi-bin/post-query" METHOD="post"> 送信ボタンコマンドボタンリセットボタンクリックすると初期状態になるローカルファイルの選択ファイル選択ダイアログが表示されるイメージボタンイメージボタン <INPUT TYPE="image" value=" イメージボタン " src="imgbutton.jpg" alt=" 地球とPCのイメージボタン"> </FORM>

14 テキストボックス 14 テキストボックス TEXTAREA <TEXTAREA NAME="textbox1" ROWS="5" COLS="30">ここに文字列が入ります </TEXTAREA> 複数行の文字列を入力するには <TEXTAREA>タグを用いる NAME 属性はテキストボックスを一意に識別するための名前を指定する ROWS 属性は表示される文字入力フィールドの幅 ( 文字数 )を指定する COLS 属性は表示される文字入力フィールドの行数を指定する ROWS 属性とCOLS 属性は必ず指定する

15 リストボックス複数項目リストから選択するには <SELECT>タグにSIZE 属性を用いる NAME 属性はリストボックスを一意に識別するための名前を指定する SIZE 属性はリストボックスの表示行数を指定する選択項目は <OPTION>タグで列挙するリストボックス SELECT NAME="list1" SIZE="5" <SELECT NAME="list1" SIZE="5"> <OPTION>アイテム1 <OPTION>アイテム2 <OPTION>アイテム3 <OPTION>アイテム4 <OPTION>アイテム5 <OPTION>アイテム6 </SELECT> 15 ドロップダウンリストボックスドロップダウンリストボックス SELECT <SELECT NAME="dropdown1"> <OPTION>アイテム1 <OPTION>アイテム2 <OPTION>アイテム3 <OPTION>アイテム4 <OPTION>アイテム5 </SELECT> 複数項目リストから選択するには <SELECT>タグを用いるリストボックスの表示行数を1 行もしくは SIZE 属性自体を指定しないとドロップダウンリストボックスになる NAME 属性はドロップダウンリストボックスを一意に識別するための名前を指定する選択項目は <OPTION>タグで列挙する

■新聞記事

■新聞記事情報処理 C (P.1) 情報処理 C (2016 年度 ) ホームページ作成入門テキストエディタ(メモ帳 TeraPad など)でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]