2014-06-22

ドットインストールHTML入門を学習

HTML&CSS

HTML５の入門講義を学習。
復習ぐらいの気分で視聴しましたが、
結構知らないこともありました
(；´∀｀)

ドットインストールHTML入門
http://dotinstall.com/lessons/basic_html_v2

▼復習になったこと＆新たに学んだことまとめ▼
===============================

[meta description]
head要素の中に記入。検索エンジンに情報を与えるもの
<meta name="description" content="初めてのHTML文書です。">

[ファビコン]favicon
head要素の中に記入
<link rel = "shortcut icon" href="favicon.ico">

[table]タグの覚え方
tr: table row (行）
th: table header
td: table data

[img title属性]
写真にマウスオーバーすると文字が出る

[form]
<form action="survey.php" method="get">
<p>名前：<input type="text" name="name" size="60" maxlength="5" required></p>
<p>パスワード：<input type="password" name="password"></p>
<p><input type="hidden" name="user_id" value="32"></p>
<p>日付：<input type="date" name="birthday"></p>
<p>メモ：<textarea name="name"></textarea></p>
<p>Colors:
<label><input type="radio" name="color" value="red">Red</label>
<input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label>
<input type="radio" name="color" value="green">Green</p>
<p><input type="submit" value="送信！"></p>
<select name="color" size="5" multiple>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GREEN</option>
</select>

</form>

action:データの送り先プログラム
method: postとgetがある
name: このフォームからデータを送った時にPHP（送り先プログラム）に
　　　データ名を知らせるための属性
maxlength="5" : 5文字まで
required: 必須項目
input type="password": 伏せ字にしてくれる
input type="hidden": 画面には表示されない。survey.phpに32というuser_idが送られる
input type="date": 入力フォームに日付＆矢印などが付く。エラーチェックもしてくれる
※HTML5から利用可能。古いブラウザだと対応されない
※他にチェックをしてくれるinput type→ url,email
textarea: 複数行　inputタグと違って閉じタグが必要
radio:ラジオボタン。１つしか選べない
checkbox: 複数選択可能
label: インプットボタンではなくラベルを選択してもチェックを入れられるようになる
label for="blue": id指定をすれば、ラベルがインプットボタンと離れていても大丈夫
select: プルダウンメニュー（セレクトボックス）
size="5" :選択肢の数指定→ボックスで指定した数の選択肢を見ることが可能
multiple :複数選択可能なボックスで表示

[実体参照]
<p>これは<p>です。</p>: そのままだと真ん中の<p>はpタグと認識されてしまう。
→不等号記号は特殊文字で置き換える
【<】　と書くと→ 【<】と表示され
【>】　と書くと→ 【>】と表示されます！
→<p> //=> <p>となる

===============================
フォームを使いこなすにはやはりphpが必須。
phpも勉強を再開せねば。

いろいろ覚えることがありますね

2014-06-11

CodecademyのHTML&CSS完了

HTML&CSS

CodecademyのHTML&CSS完了

さすがにHTMLとCSSは沢山勉強した（？）ので
JavaScriptよりもサクサク進めることができました。

ぼんやり覚えていたテーブル作成やposition,nth-childの使い方など
良い復習になったかな。

特にnth-childの数え方は知らなかった！
--------------------------------------
p:nth-child(4){color:#FFFFFF;}
bodyの中身がh1,h2,p,pだとしたら、2個目のpは4番目のchild
--------------------------------------