6/12 授業
[HTML5] 習得度確認テスト
【問1】HTMLの最新バージョンは?
【答】 HTML5
参照:
http://app-review.jp/news/159165
【問2】見出しの要素は6種類あります。すべて記述しなさい。
【答】 h1, h2, h3, h4, h5, h6
【問3】代表的なブロックレベル要素を5つ以上記述してください。
【答】 (例)div, address, dl, table, form, ul, ol, p,h1, h2, h3, h4, h5, h6
ブロック要素の種類
参照:http://weblan3.com/css/reference-css-block-inline.php
【問4】margin 0 10px 0 5px;と記述したら左のmarginは何pxになるか答えなさい。
【答】 5px
参照:
margin の相殺
http://www.geocities.co.jp/HeartLand-Icho/5345/collapsing.html
http://www.tagindex.com/stylesheet/box/margin.html
【問5】h1要素の下にp要素を配置しています。これらは通常フローをしています。cssには次のような記述をしました。
h1とpの間には何pxの空間が空いているか答えなさい。
h1{ margin:10px;}
p { margin: 10px;}
【答】 10px
【問6】次の記述をしましたが、p要素が文字色が赤くなりませんでした。p要素の文字色が赤になるように修正しなさい。
p{ color:f00; }
【答】 p{ color:#f00; } #が抜けていた
参照:
色指定、カラーコード
http://www.netyasun.com/home/color.html
【問7】 windowsのメモ帳でコーディングしました。 と記述しているが、文字化けをしてしまいました。どんな理由が考えられるかを答えなさい。
【問8】 リンクの文字色を設定しました。何故かマウスをhoverしても文字色が赤に変わりません。正しく変わるように修正しなさい。
a:link{ color:blue; }
a:hover{ color:red; }
a:active{ color:yellow; }
a:visitied{ color:green; }
【答】
a:link{ color:blue; }
a:visitied{ color:green; }
a:hover{ color:red; }
a:active{ color:yellow; }
参照:
:link :visited :hover :active の記述順序とその覚え方
http://jmblog.jp/archives/179
【問9】
<div id="wrapper"> テキスト</div>
で指定した要素にcssで次のように設定したが、背景色が正しく#eee(グレー)色で表示されません。正しく補正しなさい。
.wrapper{ background-color: #eee; }
【答】 #wrapper { background-color: #eee; }
【問10】 2段組のレイアウトを作成しています。左側のボックスは、width:200pxでpaddingが上下左右10pxとし、ボーダーは上下左右各1pxとしました。右側のボックスはwidth:700pxでpaddingが上下左右10pxとし、ボーダーは上下左右各1pxとしました。左右のボックスをきっちり囲むためにはこのボックスのwidthを何pxにすればよいか答えなさい。
【答】 944px
【スポンサードリンク】
PHP メールフォーム
メールフォーム 設定追加
《index.php》
▼maxlength を設定する
ブラウザでの入力文字数に限界値を設定する
- nameフィールドの場合:
maxlength="30"
これでブラウザ側で30文字以上入力できない
注意:同時にsizeの大きさも"60"くらいに変更(表示幅を変更しないと、文字制限が正しく効いているか分からない)
<td><input type="text" name="email" id="email" size="60" maxlength="50" placeholder="例:sample@sample.com" value ="<?php echo h($email); ?>"></td>
▼required を設定する
対象項目を入力必須条件に指定する
<td><input type="text" name="name" id="name" size="76" maxlength="30" placeholder="例:猫山猫太郎" value = "<?php echo h($name); ?>" required></td>
▼emailのtypeを"email"に設定(変更)する
<td><input type="email" name="email" id="email" size="60" maxlength="50" placeholder="例:sample@sample.com" value ="<?php echo h($email); ?>" required></td>
【演習】商品管理データベース作成
ログインフォーム
http://felica-portfolio.com/php/loginform/
DB
-テーブル作成
-SQL インポート
《画面遷移》
ログインフォーム
↓
商品一覧画面
↓
新規商品登録画面
↓
登録確認画面
↓
実行結果画面
↓
商品一覧画面に戻る
[作業]
▼php ファイルを準備する
インターフェース用のphpファイルを作成する
▼DBを作る - データベース名:entry
- テーブル作成
1件 データ作成
データを流し込む
1. php MyAdminで新規データベース作成 「entry」
2. 新規テーブル作成 「items」
[テーブル構造]
item_code
データ型: INT
AI (auto increment)
item_name
データ型:VARCHAR
長さ: 30
照合順序: utf-8 general_ci
item_price
データ型: INT
Storage Engine:
MyISAM
3. テーブルを保存
4. データを入力する
「挿入」タブ
item_name, item_priceに値を入力する
自宅学習用にデータを持ち帰りたい場合、
▼データを出力する
「エクスポート」タブ
1. 対象のデータベースを選択
2. 「エクスポート」タブを選択
エクスポート方法:
「詳細」を選択(確認作業のためだけなので、選択は必須でない)
「実行」ボタンをクリック
▼データを読み込む(インポートする)
「インポート」タブ
データベースを選択
「インポート」タブを選択
インポート用ファイルを選択
「実行」ボタンをクリック
※ 既存のテーブルに同一のものがあると、インポートエラーになるため、その場合は既存同一名テーブルのみ削除したうえでインポートを実行
$dbh= new PDO ( DBの情報,ユーザーアカウント,パスワード )
DB情報
- データベース名
- host(所在地) localhost → 127.0.0.1
《item_list.php》
▼データベースに接続するための記述を追加する
<?php $dsn = 'mysql:dbname=entry; host=localhost; charset=utf8;'; $db_user = 'root'; $db_pass = 'root'; $dbh = new PDO($dsn,$db_user, $db_pass); var_dump($dbh) ?>
dbh (database handle)
items テーブルから * (すべてのカラムの)データを取得
$sql = 'SELECT * FROM items WHERE 1;';
HTML5 まとめ問題