HTML で自己紹介               をつくる2013/4/17     1          UT Startup Gym
飯塚修平            東京大学工学系研究科            技術経営戦略学専攻 (TMI)修士2年            オーマ株式会社 あのひと検索スパイシー PM            2012 年 Google ウェブマス...
ウェブアプリの仕組み                      HTTP                                  PHP など                                   で記述        ...
今日学ぶこと• HTML• CSS• javascript2013/4/17        4      UT Startup Gym
HTML とは2013/4/17      5      UT Startup Gym
HTML とは            みてるもの             HTML                     ブラウザ2013/4/17              6             UT Startup Gym
CSS とは• ウェブサイトの見た目を記述する       – 色を変えたい       – 囲み線を加えたい       – 配置を変えたい       – 角を丸くしたい       – 影を加えたい       – グラデーションをかけた...
javascript とは• HTML に動的な要素を加える。       – クリックしたら〇〇       – 一定時間経過したら〇〇• アニメーション2013/4/17           8         UT Startup Gym
javascript とは            onclick=“hoge()”2013/4/17          9           UT Startup Gym
API とは• 外部サービスのデータや機能を使うことができ  る。• ex. http://graph.facebook.com/あなたの  ID/picture?type=large• ex.  https://api.twitter.com...
HTML の文法<!DOCTYPE html><html>   <head>      <meta charset=“utf=8”>        head:                                    タイトルやエン...
HTML の文法• タグ       – <p> や </p> のように < と > で囲まれた部分のこと       – <p> のように / がつかないタグは「開きタグ」       – </p> のように / がつくタグは「閉じタグ」• ...
さまざまなタグ•    h1, h2 ... (heading) タイトル、見出し•    img src (image source is...) 画像•    a href (anchor, hypertext reference) リンク...
ワーク1• 以上のすべてのタグを使って自己紹介のページ  を作ってください。2013/4/17    14     UT Startup Gym
書いてみよう!• テキストエディタを使って書きます。       – Word は、文章作成ソフトです。• Windows       – (メモ帳)       – サクラエディタ       – TeraPad• Mac       – (...
CSSの文法• style 要素の内容に書く  <style>  selecter {      property: value;      property: value;  }  </style>• HTML 開きタグの中に書く  <div...
ワーク2• 自己紹介ページをデザインしてください。       – 「これできないかな?」と思ったらググる       – だいたいできるはず2013/4/17          17          UT Startup Gym
javascript の文法• script 要素の内容に書く  <script>      var hoge = “piyo”;      alert (hoge);  </script>• HTML 開きタグの中に書く  <div oncl...
ワーク3• 自己紹介ページのどこかをクリックしたらポッ  プアップが出るようにしてください。       – onclick2013/4/17           19    UT Startup Gym
• なんか文字化けする – 作成したHTMLファイルを保存する時の文字コードを   UTF-8に指定しましょう• ブラウザで開いてもHTMLタグが表示される – エディタを確かめてください – Wordやワードパッド、 Macのテキストエディッ...
Upcoming SlideShare
Loading in …5
×

HTML で自己紹介ページをつくる

2,899 views

Published on

東京大学工学系研究科技術経営戦略学専攻 ウェブ工学とビジネスモデル第 2 回講義資料

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,899
On SlideShare
0
From Embeds
0
Number of Embeds
157
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML で自己紹介ページをつくる

  1. 1. HTML で自己紹介 をつくる2013/4/17 1 UT Startup Gym
  2. 2. 飯塚修平 東京大学工学系研究科 技術経営戦略学専攻 (TMI)修士2年 オーマ株式会社 あのひと検索スパイシー PM 2012 年 Google ウェブマスターインターン2013/4/17 2 UT Startup Gym
  3. 3. ウェブアプリの仕組み HTTP PHP など で記述 URI (リクエスト) データベース HTML (レスポンス)ブラウザ ウェブサーバ API 外部サービス2013/4/17 3 UT Startup Gym
  4. 4. 今日学ぶこと• HTML• CSS• javascript2013/4/17 4 UT Startup Gym
  5. 5. HTML とは2013/4/17 5 UT Startup Gym
  6. 6. HTML とは みてるもの HTML ブラウザ2013/4/17 6 UT Startup Gym
  7. 7. CSS とは• ウェブサイトの見た目を記述する – 色を変えたい – 囲み線を加えたい – 配置を変えたい – 角を丸くしたい – 影を加えたい – グラデーションをかけたい2013/4/17 7 UT Startup Gym
  8. 8. javascript とは• HTML に動的な要素を加える。 – クリックしたら〇〇 – 一定時間経過したら〇〇• アニメーション2013/4/17 8 UT Startup Gym
  9. 9. javascript とは onclick=“hoge()”2013/4/17 9 UT Startup Gym
  10. 10. API とは• 外部サービスのデータや機能を使うことができ る。• ex. http://graph.facebook.com/あなたの ID/picture?type=large• ex. https://api.twitter.com/1/statuses/user_timeline.json ?screen_name=あなたのTwitter ID2013/4/17 10 UT Startup Gym
  11. 11. HTML の文法<!DOCTYPE html><html> <head> <meta charset=“utf=8”> head: タイトルやエンコードなど <title> My Web App </title> メタな情報を記述する </head> <body> body: This is content. ブラウザに描写される 内容を記述する </body></html>2013/4/17 11 UT Startup Gym
  12. 12. HTML の文法• タグ – <p> や </p> のように < と > で囲まれた部分のこと – <p> のように / がつかないタグは「開きタグ」 – </p> のように / がつくタグは「閉じタグ」• 要素 – 開きタグ〜閉じタグまで含んで要素という• 内容 – タグの間に挟まれた部分を内容という2013/4/17 12 UT Startup Gym
  13. 13. さまざまなタグ• h1, h2 ... (heading) タイトル、見出し• img src (image source is...) 画像• a href (anchor, hypertext reference) リンク• ul (unordered list) 箇条書き• li (list item) 箇条書きの項目2013/4/17 13 UT Startup Gym
  14. 14. ワーク1• 以上のすべてのタグを使って自己紹介のページ を作ってください。2013/4/17 14 UT Startup Gym
  15. 15. 書いてみよう!• テキストエディタを使って書きます。 – Word は、文章作成ソフトです。• Windows – (メモ帳) – サクラエディタ – TeraPad• Mac – (テキストエディタ) – mi• CUI(ターミナル): これは慣れが必要 – emacs – vim• エディタ力が上がると、一打鍵の攻撃力が上がります2013/4/17 15 UT Startup Gym
  16. 16. CSSの文法• style 要素の内容に書く <style> selecter { property: value; property: value; } </style>• HTML 開きタグの中に書く <div style=“property:value”></div>2013/4/17 16 UT Startup Gym
  17. 17. ワーク2• 自己紹介ページをデザインしてください。 – 「これできないかな?」と思ったらググる – だいたいできるはず2013/4/17 17 UT Startup Gym
  18. 18. javascript の文法• script 要素の内容に書く <script> var hoge = “piyo”; alert (hoge); </script>• HTML 開きタグの中に書く <div onclick=“alert(‘hoge’);”></div>2013/4/17 18 UT Startup Gym
  19. 19. ワーク3• 自己紹介ページのどこかをクリックしたらポッ プアップが出るようにしてください。 – onclick2013/4/17 19 UT Startup Gym
  20. 20. • なんか文字化けする – 作成したHTMLファイルを保存する時の文字コードを UTF-8に指定しましょう• ブラウザで開いてもHTMLタグが表示される – エディタを確かめてください – Wordやワードパッド、 Macのテキストエディットは 書式情報を保存してくれちゃう、プレーンテキスト 用エディタじゃないです • Windowsならとりあえずメモ帳 • MacならmiとかDLしてみましょう

×