HTML で自己紹介ページをつくる
Download as PPTX, PDF1 like5,772 views
東京大学工学系研究科技術経営戦略学専攻 ウェブ工学とビジネスモデル第 2 回講義資料
More Related Content
What's hot (11)
Similar to HTML で自己紹介ページをつくる (20)
More from Shuhei Iitsuka (20)
Recently uploaded (11)
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してみましょう