webページで学ぶjavascript2013 第3回
Post on 24-May-2015
201 Views
Preview:
TRANSCRIPT
Webページで学ぶJavaScript 2013 第3回
tyage@KMC6/4
せんしゅうのわんこ
● for● while● HTML
○ いろんな要素が出てきた
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
補足説明
● HTML要素は入れ子にできますが、ある要素Aが内包している要素Bとの関係を「AはBの親」「BはAの親」とか呼びます。
<div><img>
</div>div要素：親
img要素：子
補足説明
<section><h1>タイトル</h1><div>
<p>文章</p></div>
</section>
divとh1は兄弟
pはsectionの孫
前回でてきた要素
● html● head● title● body● p● br● img● h1, h2, h3, h4, h5, h6● div● a
あとこれくらいは覚えておいて欲しい要素
● リスト○ ul, li
● テーブル○ table, tr, th, td
● フォーム○ form, input, textarea, select, option
● DOCTYPE宣言● コメント
リスト
リスト全体はul（unorderd list）要素
リストの項目はli（list item）要素
<ul><li>あれ</li><li>これ</li><li>それ</li><li>どれ</li>
</ul>
リスト
ulの代わりにol（orderd list）を使ってみる
<ol><li>あれ</li><li>これ</li><li>それ</li><li>どれ</li>
</ol>
テーブル
tableでテーブル全体
tr（table row）で行、
th（table header cell）やtd（table data cell）で各セルを埋める
時間割とか作ってみよう
テーブル
時間割とか作ってみよう
<table><tr><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th></tr>
<tr><td>月1</td><td>火1</td><td>水1</td><td>木1</td><td>金1</td></tr><tr><td>月2</td><td>火2</td><td>水2</td><td>木2</td><td>金2</td></tr><tr><td>月3</td><td>火3</td><td>水3</td><td>木3</td><td>金3</td></tr><tr><td>月4</td><td>火4</td><td>水4</td><td>木4</td><td>金4</td></tr><tr><td>月5</td><td>火5</td><td>水5</td><td>木5</td><td>金5</td></tr>
</table>
フォーム
ログイン時のID・パスワードの入力欄とかそういうやつ
form要素がフォーム全体
<input type="text">が一行テキスト入力欄
<input type="submit">で送信ボタン
<textarea>で複数行入力欄
<select>で選択肢から選択するやつ
etc...
フォーム
例えばログイン画面とか
<form>ID: <input type='text'><br>Pass: <input type='password'><br><input type='submit' value='ログイン'>
</form>
フォーム
セレクトボックスはこんな感じ
<form>出身地：
<select><option>北海道</option><option>東北</option><option>関東</option><option>北陸</option><option>中部</option><option>...</option>
</select></form>
フォーム
種類が多すぎて全部は説明しきれないので、出てくる都度覚えて行きましょう
（HTML5になってdateとかcolorとかemailとか色々と増えたし）
DOCTYPE宣言
使用するHTMLのバージョンや文書型の宣言歴史的経緯でつけるようになった
昔（HTML4）は<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">とか（XHTML）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
今（HTML5）は<!DOCTYPE html>でいい
コメント
ブラウザに描画されないコメントを書けます編集する時に便利だったり
https://www.tumblr.com/
<!-- ここにコメント内容を書きます -->
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカル環境で書いてみましょう
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカル環境で書いてみましょう
● お好きなテキストエディタをご用意ください
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカル環境で書いてみましょう
● お好きなテキストエディタをご用意ください● 適当な場所に、sample.htmlというファイルを作
り、編集しましょう○ ※末尾が.htmlならなんでもいいです
ローカルでHTMLを書く
<!doctype html><html lang="ja"><head>
<meta charset="UTF-8"><title>こんにちはこんにちは！</title>
</head><body>
<p>もふもふ</p></body></html>
ローカルでHTMLを書く
UTF-8で保存するように心がけましょう
head要素内に
<meta charset='UTF-8'>を入れるとUTF-8で表示してくれて文字化けしない
です
ローカルでHTMLを書く
● KMCサーバーにこのファイルをアップロードすれば、みんなアクセスできます
● さっきアップローダー作りました● https://www.kmc.gr.jp/~tyage/uploader/● 作ったページをアップロードしよう〜〜● （複数ファイルアップロード可）
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
CSS● HTMLだけだと素っ気ないままだと思います● そこで、Webページのデザイン部分を担当する
「CSS」の出番です● いろんなページのCSSを見ていこう〜〜〜
CSS● 参考ページ：● https://developer.mozilla.
org/ja/docs/Web/CSS
投げやりですがここを読み進めます！！！
お疲れ様でした
● 次回は来週です
top related