Webサーバ、HTML

目次
●
勉強会に参加するにあたって
●
今日、勉強すること
●
とりあえず、やってみよう
● HTML を最低限書けるようになろう

●
一週間に一回の勉強会に参加するということ
●
何かをするということ
● = 何かをしないということ
●
辛いこともあると思いますが、頑張っていきましょ
う
●
勉強会の目的
●
ウェブサービスを立ち上げる、オールマイティにな
ること
●
この勉強会では、一つの技術にこだわっている時間
はない
●
必要な部分だけ素早く理解し、頑張っていきましょ
う

●
もっとも重要なこと
●
たぶん、この勉強会はつまらない
●
延々と「こういう風に書いたらこうなります」「こ
うしたらこうなります」という話を聞き続けること
になるから
●
ウェブサービスを作るということは、泥臭くつまら
ない、生産性を感じない長い長い作業の結晶である
から
●
思ったより、華々しい世界ではない

● ウェブを構成する 3 つの技術
● HTML
● HTTP
● URI


ウェブサーバ
HTTP
URI

HTML

ブラウザ

●
ウェブサーバって何だろう？

とりあえず、やってみよう！
●
ターミナルを開こう
●
ターミナルってなんでこんなの使うの？
●
ターミナルからじゃないと、めんどくさいことがた
くさんある。
●
ターミナルのほうが、慣れてくると効率が良い（か
も）

# 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
●
デザイン的なこと
●
文字、画像、色、フォント
●
配置、四角の辺と、どの辺がどの辺の基準になって
いるか

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

Webサーバ、HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Webサーバ、HTML

Ähnlich wie Webサーバ、HTML (20)

Mehr von Shuhei Iitsuka

Mehr von Shuhei Iitsuka (20)

Webサーバ、HTML