Your SlideShare is downloading. ×
Webページで学ぶJavaScript2013 第3回
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webページで学ぶJavaScript2013 第3回

177

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
177
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×