Webサーバ、HTML

  • 1,371 views
Uploaded on

@amachang による資料です!

@amachang による資料です!

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,371
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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. ウェブサーバ、HTML
  • 2. 目次● 勉強会に参加するにあたって● 今日、勉強すること● とりあえず、やってみよう● HTML を最低限書けるようになろう
  • 3. 勉強会に参加するにあたって● 一週間に一回の勉強会に参加するということ ● 何かをするということ ● = 何かをしないということ ● 辛いこともあると思いますが、頑張っていきましょ う● 勉強会の目的 ● ウェブサービスを立ち上げる、オールマイティにな ること ● この勉強会では、一つの技術にこだわっている時間 はない ● 必要な部分だけ素早く理解し、頑張っていきましょ う
  • 4. 勉強会に参加するにあたって● もっとも重要なこと ● たぶん、この勉強会はつまらない ● 延々と「こういう風に書いたらこうなります」「こ うしたらこうなります」という話を聞き続けること になるから ● ウェブサービスを作るということは、泥臭くつまら ない、生産性を感じない長い長い作業の結晶である から ● 思ったより、華々しい世界ではない
  • 5. 今日、勉強すること● ウェブを構成する 3 つの技術 ● HTML ● HTTP ● URI
  • 6. 今日、勉強することウェブサーバ HTTP URI HTML ブラウザ
  • 7. 今日、勉強すること● ウェブサーバって何だろう?
  • 8. とりあえず、やってみよう!● ターミナルを開こう● ターミナルってなんでこんなの使うの? ● ターミナルからじゃないと、めんどくさいことがた くさんある。 ● ターミナルのほうが、慣れてくると効率が良い(か も)
  • 9. とりあえず、やってみよう# Apache2 (ウェブサーバのインストール)sudo apt-get install apache2 こういう感じのは、 あんまり使わない→
  • 10. とりあえず、やってみよう# Apache2 の設定sudo vim /etc/apache2/sites-available/default# DocumentRoot を書き換えて公開するディレクトリを決めるDocumentRoot /home/ubuntu/www 設定といえば、こんなの?→ ←いえ、こんなのです 一見難しそうだけど、そのうち慣れます
  • 11. とりあえず、やってみよう# Apache2 の再起動sudo service apache2 restart
  • 12. とりあえず、やってみよう# DocumentRoot で公開したディレクトリにファイルを置いてみるvim /home/ubuntu/www/hoge.html# ファイルには以下のような内容<body>hey</body>
  • 13. とりあえず、やってみよう● ブラウザで http://localhost/hoge.html を見てみ よう● Google Chrome のデベロッパーツールの Network を使って、HTTP で URI や HTML は どのように送られているのか見ることが出来る● telnet で実際に生 HTTP も送ってみよう HTTP ってこんな感じのやりとり→
  • 14. HTML を最低限書けるようにしよう● HTML で伝えたいことが伝えらるようになろう● HTML を書く前に、どのくらいのコストがかか るのか、見積もれるようになろう
  • 15. HTML を最低限書けるようにしよう● 基本的なこと ● 要素、タグ、内容 ● ハイパーリンク ● CSS● デザイン的なこと ● 文字、画像、色、フォント ● 配置、四角の辺と、どの辺がどの辺の基準になって いるか
  • 16. 要素、タグ、内容<html> <head> <meta charset=”UTF-8”> <title>タイトル</title> </head> <body> <h1><img src=”/logo.gif”></h1> <p>ほげ<span>ふが</span></p> </body></html>
  • 17. 要素、タグ、内容● タグ ● <p> や </p> など < から > で囲まれた部分を言う ● <p> のような / が先頭に付かないタグは「開きタ グ」と言う ● </p> のような / が先頭に付くタグは「閉じタグ」と 言う● 要素 ● 開きタグ〜閉じタグまで含んで「要素」という● 内容 ● 開きタグと、閉じタグの間にある部分を「内容」と いう
  • 18. ハイパーリンク<a href=”http://www.google.com/”>google</a>
  • 19. CSS● 要素がどんな見た目なのかを書くための文法● 開きタグの中に書く方法 <div style=”background-color: red”>ほげほげ</div> <span style=”color: blue”>ふがふが</span> <p style=”margin: 2px; padding: 3px; border: 4px solid black”>ぴぽぴぽ</p>● style 要素の内容に書く <style> p { position: absolute; width: 100px; height: 100px } a.hoge { font-size: 30px; font-weight: bold } </style>
  • 20. HTML でデザイン● 文字 ● 文字揃え: text-align ● 色: color ● フォント: font-family ● 文字の大きさ: font-size● 背景 ● 色: background-color ● 画像: background-image
  • 21. HTML でデザイン● マルチカラムレイアウト ● float, clearfix ● position● 余白、ボーダー ● margin, padding, border● 絶対位置決め ● position
  • 22. 次回以降の環境について● 今回は、とりあえず Ubuntu という環境に揃え てやってみましたが● 次回以降は、自分の好きな環境を構築してやっ ていただいて結構です● ただ、個人の環境でやる場合。サポート出来な い可能性があるので注意してください● Amazon EC2 に SSH で繋いでやりたい場合、 10,000 円までサポートできるというお話を Amazon 様から頂いているので、その方は僕か 飯塚のほうまでメッセージ等でご相談ください