Your SlideShare is downloading. ×
0
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
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

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

1,632

Published on

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

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

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

No Downloads
Views
Total Views
1,632
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
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. HTML で自己紹介 をつくる2013/4/17 1 UT Startup Gym
  • 2. 飯塚修平 東京大学工学系研究科 技術経営戦略学専攻 (TMI)修士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• javascript2013/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 ID2013/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. ワーク1• 以上のすべてのタグを使って自己紹介のページ を作ってください。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. ワーク2• 自己紹介ページをデザインしてください。 – 「これできないかな?」と思ったらググる – だいたいできるはず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. ワーク3• 自己紹介ページのどこかをクリックしたらポッ プアップが出るようにしてください。 – onclick2013/4/17 19 UT Startup Gym
  • 20. • なんか文字化けする – 作成したHTMLファイルを保存する時の文字コードを UTF-8に指定しましょう• ブラウザで開いてもHTMLタグが表示される – エディタを確かめてください – Wordやワードパッド、 Macのテキストエディットは 書式情報を保存してくれちゃう、プレーンテキスト 用エディタじゃないです • Windowsならとりあえずメモ帳 • MacならmiとかDLしてみましょう

×