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