Transcript PPTX版

HTML テキスト補足資料
文字装飾
<sup>タグ 上付き文字
テキストを上付き文字として表示する。
（例）
c<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>
<sub>タグ 上付き文字
テキストを下付き文字として表示する。
（例）
H<sub>2</sub>O
文字装飾
<pre>タグ 整形テキスト
改行や空白など、ソースの記述そのままに表示。
ソースコード
<pre>
テストです。
テストです。
テストです。
</pre>
ブラウザ
テストです。
テストです。
テストです。
※<br>等入れなくてもソースの表示
のまま改行や空白が表示される。
クリッカブルマップ1
<img>タグusemap属性
<map>タグ
<area>タグ
1枚の画像内に、複数のリンクを設定する。
使用例
１．<img>タグにて画像を指定すると共に、usemap
属性で、マップを指定
(記述例)
<img src="map.gif" usemap="#map">
#を忘れずに
2．<map>タグにてmap名を指定
(記述例)
<img src="map.gif" usemap="#map">
<map name="map">
</map>
usemapで指定した名前を
mapで使う事で関連付けられる
クリッカブルマップ2
使用例
3．<map>タグ内に<area>タグを設定。
shape属性で、エリアの形状を指定する。
(記述例)
<img src="map.gif" usemap="#map">
<map name="map">
<area shape="rect">
<area shape="circle">
<area shape="poly">
</map>
shape 属性
coords 属性
rect
四角形の左上の座標（x,y）、右下の座標（x,y）
circle
円形の中心の座標（x,y）、半径の長さ(r)
poly
多角形の全ての角の座標（x,y）
4．<area>タグcoords属性にて、各形状の
座標軸を指定
(記述例)
<img src="map.gif" usemap="#map">
<map name="map">
<area shape="rect" coords="20,20,80,80">
<area shape="circle" coords="130,50,30">
<area shape="poly" coords="210,20,180,80,240,80">
<areashape="poly" coords="260,35,260,65,300,65,300,80,330,50,300,20,300,35">
</map>
クリッカブルマップ3
使用例
5．<area>タグhref属性にてリンク先を、alt属性で代替文字を指定する。
(記述例)
<img src="map1.gif" usemap="#map_1" border="0">
<map name="map_1">
<area shape="rect" coords="20,20,80,80" href="link_rect.html" alt="四角形">
<area shape="circle" coords="130,50,30" href="link_circle.html" alt="円形">
<area shape="poly" coords="210,20,180,80,240,80" href="link_poly1.html" alt="三角形">
<area shape="poly" coords="260,35,260,65,300,65,300,80,330,50,300,20,300,35"
href="link_poly2.html" alt="矢印">
</map>
※座標軸の調べ方
座標軸は画像編集ソフトで調べるしかありません。
Photoshop等で調べてください。
参考サイトURL:
http://park16.wakwak.com/~html-css/map/map1.html
Flashファイルの埋め込み１
<object>タグ Flash等データを埋め込む
data属性 ファイルのパスを指定
type属性 MIMEタイプを指定
width属性 データの幅を指定
height属性 データの高さを指定
（例）
<object data="movie.swf" type="application/x-shockwave-flash" width="200" height="300">
<param name="src" value="movie.swf">
<param name="loop" value="true">
FlashPlayerをダウンロードして下さい。
</object>
※<object>タグ内に記述された文字列は、埋め込んだFlashが正しく表示出来ない
場合に表示されます。
ｔableタグ１
cellpadding属性
cellspacing属性
枠線と内容の間隔を指定
セル同士の間隔を指定
（例）
<table border="1" cellpadding="10" cellspacing="10">
cellpadding
cellspacing
ｔableタグ２
colspan属性 行を結合
rowspan属性 列を結合
（例）
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td colspan="2">セル１</td>
</tr>
結合したいセルの数を記述
<tr>
<td rowspan="2">セル2</td>
<td>セル3</td> 結合したいセルの数を記述
</tr>
<tr>
<td>セル４</td>
</tr>
</table>
rowspan
colspan
フォーム１
メール送信等の動作は、HTML/CSSでは出来ない。
すべてCGI,PHPと言ったプログラムでないと行う事が出来ない。
HTML側では、フォームの作成のみを行い、処理は別途プログラムで行う
必要がある。
フォーム２
<form>タグ フォームで送信する送信方法や送り先、範囲を指定する。
action属性
フォームデータのファイルパスを指定
method属性 データ送信方法を指定（getまたはpost）
enctype属性 データ送信する際の形式を指定
name属性 フォームの名前を指定
（例）
<form action="mail.php" method="post" enctype="multipart/form-data">
ここにフォームの内容を記述していく
</form>
※method属性・enctype属性の設定内容は、プログラムに依存される。
そのため、プログラム作成側に設定内容を聞き、その値を指定する必要がある。
フォーム３
<input>タグ 入力エリア等を作成。
type属性
<input>の種類を指定
type属性の値
text ・・・ テキストボックスを作成
password ・・・ パスワードボックスを作成
radio ・・・ラジオボタンを作成
checkbox ・・・チェックボックスを作成
submit ・・・ 送信ボタンを作成
reset ・・・ リセットボタンを作成
text
password
radio
checkbox
submit
reset
フォーム４
<input>タグ 入力エリア等を作成。
size属性
テキストフィールドのサイズを半角英数字の文字数で指定
maxlength属性
テキストフィールドに入力出来る最大文字数を指定
（例）
<input type="text" size="10" maxlength="15">
フォーム５
<input>タグ type属性 text,passwordの場合
name属性
value属性
プログラムに引き渡す際の値を指定
テキストエリア上に予め文字列を入力
（例）
<input type="text" name="namae" value="名前を入力してください">
※nameで指定した値が、プログラム側では主に関数として処理される。
フォーム６
<input>タグ type属性 radio,checkboxの場合
name属性 グループ名を指定
value属性 プログラム上で処理される名称を指定
checked属性 あらかじめチェック項目を入力
（例）
<input type="radio" name="age" value="10代"> 10代
<input type="radio" name="age" value="20代"> 20代
<input type="radio" name="age" value="30代" checked> 30代
<input type="radio" name="age" value="40代"> 40代
<input type="radio" name="age" value="50代"> 50代
※ラジオボタンは、いずれか一つしかチェックする事が出来ないボタン。
いずれがひとつの元となるグループを、同一のname名を指定する事により、
それらがグループであると認識される。
※valueを設定しないと、プログラム側には「チェックが入っている」という情報しか
送信されず、どのボタンにチェック入れたのかわからない。
そこでvalueを指定し、その値名でチェックが入っている項目を識別する。
フォーム７
<input>タグ type属性 submit,resetの場合
name属性
value属性
プログラムに引き渡す際の値を指定
ボタン上に表示される文字列を指定
（例）
<input type="submit" name="submit" value="送信する">
<input type="submit" name="reset" value="リセットする">
フォーム８
<input>タグ type属性 値image
送信ボタンをオリジナル画像に変更する
name属性 プログラムに引き渡す際の値を指定
src属性 表示したい画像のパスを指定
alt属性 表示画像の代替文字を指定
（例）
<input type="image" name="submit" src="image/btn.gif" alt= "送信ボタン">
フォーム９
<select>タグ 選択リストを作成する
name属性 プログラムに引き渡す際の値を指定
multiple属性 フィールド型リストを作成
size属性 フィールド型リストのサイズを指定
<option>タグ
value属性
選択リスト項目を作成する
プログラム上で処理される名称を指定
selected属性
初期設定値を指定
（例）
<select name=“review”>
<option=“大変よい”>大変よい</option>
<option=“よい”>よい</option>
<option=“ふつう” selected>ふつう</option>
<option=“わるい”>わるい</option>
<option=“大変わるい”>大変わるい</option>
</select>
multiple設定時
フォーム１０
<textarea>タグ テキストボックスフィールドを作成する
name属性 プログラムに引き渡す際の値を指定
cols属性 入力フィールドの幅を文字数で指定
rows属性 入力フィールドの高さを行で指定
（例）
<textarea name=“comment” cols=“30” rows=“5”></textarea>
※textarea内に文字列を入力すると、あらかじめテキストエリアに入力
出来ます。