HTML で自己紹介ページをつくる
Download as PPTX, PDF1 like5,786 views
東京大学工学系研究科技術経営戦略学専攻 ウェブ工学とビジネスモデル第 2 回講義資料
HTML で自己紹介ページをつくる
- 1. HTML で自己紹介 をつくる 2013/4/17 1 UT Startup Gym
- 2. 飯塚修平 東京大学工学系研究科 技術経営戦略学専攻 （ＴＭＩ）修士２年 オーマ株式会社 あのひと検索スパイシー PM 2012 年 Google ウェブマスターインターン 2013/4/17 2 UT Startup Gym
- 3. ウェブアプリの仕組み HTTP PHP など で記述 URI (リクエスト) データベース HTML (レスポンス) ブラウザ ウェブサーバ API 外部サービス 2013/4/17 3 UT Startup Gym
- 4. 今日学ぶこと • HTML • CSS • javascript 2013/4/17 4 UT Startup Gym
- 5. HTML とは 2013/4/17 5 UT Startup Gym
- 6. HTML とは みてるもの HTML ブラウザ 2013/4/17 6 UT Startup Gym
- 7. CSS とは • ウェブサイトの見た目を記述する – 色を変えたい – 囲み線を加えたい – 配置を変えたい – 角を丸くしたい – 影を加えたい – グラデーションをかけたい 2013/4/17 7 UT Startup Gym
- 8. javascript とは • HTML に動的な要素を加える。 – クリックしたら〇〇 – 一定時間経過したら〇〇 • アニメーション 2013/4/17 8 UT Startup Gym
- 9. javascript とは onclick=“hoge()” 2013/4/17 9 UT Startup Gym
- 10. API とは • 外部サービスのデータや機能を使うことができ る。 • ex. http://graph.facebook.com/あなたの ID/picture?type=large • ex. https://api.twitter.com/1/statuses/user_timeline.json ?screen_name=あなたのTwitter ID 2013/4/17 10 UT Startup Gym
- 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. HTML の文法 • タグ – <p> や </p> のように < と > で囲まれた部分のこと – <p> のように / がつかないタグは「開きタグ」 – </p> のように / がつくタグは「閉じタグ」 • 要素 – 開きタグ〜閉じタグまで含んで要素という • 内容 – タグの間に挟まれた部分を内容という 2013/4/17 12 UT Startup Gym
- 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. ワーク１ • 以上のすべてのタグを使って自己紹介のページ を作ってください。 2013/4/17 14 UT Startup Gym
- 15. 書いてみよう！ • テキストエディタを使って書きます。 – Word は、文章作成ソフトです。 • Windows – （メモ帳） – サクラエディタ – TeraPad • Mac – （テキストエディタ） – mi • CUI（ターミナル）: これは慣れが必要 – emacs – vim • エディタ力が上がると、一打鍵の攻撃力が上がります 2013/4/17 15 UT Startup Gym
- 16. CSSの文法 • style 要素の内容に書く <style> selecter { property: value; property: value; } </style> • HTML 開きタグの中に書く <div style=“property:value”></div> 2013/4/17 16 UT Startup Gym
- 17. ワーク２ • 自己紹介ページをデザインしてください。 – 「これできないかな？」と思ったらググる – だいたいできるはず 2013/4/17 17 UT Startup Gym
- 18. javascript の文法 • script 要素の内容に書く <script> var hoge = “piyo”; alert (hoge); </script> • HTML 開きタグの中に書く <div onclick=“alert(‘hoge’);”></div> 2013/4/17 18 UT Startup Gym
- 19. ワーク３ • 自己紹介ページのどこかをクリックしたらポッ プアップが出るようにしてください。 – onclick 2013/4/17 19 UT Startup Gym
- 20. • なんか文字化けする – 作成したHTMLファイルを保存する時の文字コードを UTF-8に指定しましょう • ブラウザで開いてもHTMLタグが表示される – エディタを確かめてください – Wordやワードパッド、 Macのテキストエディットは 書式情報を保存してくれちゃう、プレーンテキスト 用エディタじゃないです • Windowsならとりあえずメモ帳 • MacならmiとかDLしてみましょう