webページで学ぶjavascript2013 第3回
TRANSCRIPT
![Page 1: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/1.jpg)
Webページで学ぶJavaScript 2013 第3回
tyage@KMC6/4
![Page 2: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/2.jpg)
せんしゅうのわんこ
● for● while● HTML
○ いろんな要素が出てきた
![Page 3: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/3.jpg)
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
![Page 4: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/4.jpg)
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
![Page 5: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/5.jpg)
補足説明
● HTML要素は入れ子にできますが、ある要素Aが内包している要素Bとの関係を「AはBの親」「BはAの親」とか呼びます。
<div><img>
</div>div要素:親
img要素:子
![Page 6: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/6.jpg)
補足説明
<section><h1>タイトル</h1><div>
<p>文章</p></div>
</section>
divとh1は兄弟
pはsectionの孫
![Page 7: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/7.jpg)
前回でてきた要素
● html● head● title● body● p● br● img● h1, h2, h3, h4, h5, h6● div● a
![Page 8: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/8.jpg)
あとこれくらいは覚えておいて欲しい要素
● リスト○ ul, li
● テーブル○ table, tr, th, td
● フォーム○ form, input, textarea, select, option
● DOCTYPE宣言● コメント
![Page 9: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/9.jpg)
リスト
リスト全体はul(unorderd list)要素
リストの項目はli(list item)要素
<ul><li>あれ</li><li>これ</li><li>それ</li><li>どれ</li>
</ul>
![Page 10: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/10.jpg)
リスト
ulの代わりにol(orderd list)を使ってみる
<ol><li>あれ</li><li>これ</li><li>それ</li><li>どれ</li>
</ol>
![Page 11: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/11.jpg)
テーブル
tableでテーブル全体
tr(table row)で行、
th(table header cell)やtd(table data cell)で各セルを埋める
時間割とか作ってみよう
![Page 12: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/12.jpg)
テーブル
時間割とか作ってみよう
<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>
![Page 13: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/13.jpg)
フォーム
ログイン時のID・パスワードの入力欄とかそういうやつ
form要素がフォーム全体
<input type="text">が一行テキスト入力欄
<input type="submit">で送信ボタン
<textarea>で複数行入力欄
<select>で選択肢から選択するやつ
etc...
![Page 14: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/14.jpg)
フォーム
例えばログイン画面とか
<form>ID: <input type='text'><br>Pass: <input type='password'><br><input type='submit' value='ログイン'>
</form>
![Page 15: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/15.jpg)
フォーム
セレクトボックスはこんな感じ
<form>出身地:
<select><option>北海道</option><option>東北</option><option>関東</option><option>北陸</option><option>中部</option><option>...</option>
</select></form>
![Page 16: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/16.jpg)
フォーム
種類が多すぎて全部は説明しきれないので、出てくる都度覚えて行きましょう
(HTML5になってdateとかcolorとかemailとか色々と増えたし)
![Page 17: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/17.jpg)
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>でいい
![Page 18: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/18.jpg)
コメント
ブラウザに描画されないコメントを書けます編集する時に便利だったり
https://www.tumblr.com/
<!-- ここにコメント内容を書きます -->
![Page 19: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/19.jpg)
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
![Page 20: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/20.jpg)
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカル環境で書いてみましょう
![Page 21: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/21.jpg)
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカル環境で書いてみましょう
● お好きなテキストエディタをご用意ください
![Page 22: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/22.jpg)
ローカルでHTMLを書く
● 今まではブラウザ上で書いていましたが、ローカル環境で書いてみましょう
● お好きなテキストエディタをご用意ください● 適当な場所に、sample.htmlというファイルを作
り、編集しましょう○ ※末尾が.htmlならなんでもいいです
![Page 23: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/23.jpg)
ローカルでHTMLを書く
<!doctype html><html lang="ja"><head>
<meta charset="UTF-8"><title>こんにちはこんにちは!</title>
</head><body>
<p>もふもふ</p></body></html>
![Page 24: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/24.jpg)
ローカルでHTMLを書く
UTF-8で保存するように心がけましょう
head要素内に
<meta charset='UTF-8'>を入れるとUTF-8で表示してくれて文字化けしない
です
![Page 25: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/25.jpg)
ローカルでHTMLを書く
● KMCサーバーにこのファイルをアップロードすれば、みんなアクセスできます
● さっきアップローダー作りました● https://www.kmc.gr.jp/~tyage/uploader/● 作ったページをアップロードしよう〜〜● (複数ファイルアップロード可)
![Page 26: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/26.jpg)
きょうのわんこ
● もっとHTML● ローカルでHTMLを書こう● CSSでページをデザインする
![Page 27: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/27.jpg)
CSS● HTMLだけだと素っ気ないままだと思います● そこで、Webページのデザイン部分を担当する
「CSS」の出番です● いろんなページのCSSを見ていこう〜〜〜
![Page 28: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/28.jpg)
CSS● 参考ページ:● https://developer.mozilla.
org/ja/docs/Web/CSS
投げやりですがここを読み進めます!!!
![Page 29: Webページで学ぶJavaScript2013 第3回](https://reader034.vdocuments.pub/reader034/viewer/2022042814/5561525fd8b42adb6b8b5344/html5/thumbnails/29.jpg)
お疲れ様でした
● 次回は来週です