Webサーバ、HTML

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 様から頂いているので、その方は僕か飯塚のほうまでメッセージ等でご相談ください

Webサーバ、HTML

Webサーバ、HTML

Recommended

More Related Content

What's hot

What's hot(16)

Viewers also liked

Viewers also liked(8)

Similar to Webサーバ、HTML

Similar to Webサーバ、HTML(20)

More from Shuhei Iitsuka

More from Shuhei Iitsuka(20)

Webサーバ、HTML