Webページで学ぶJavaScript2013 第3回

355 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
355
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webページで学ぶJavaScript2013 第3回

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

×