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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (8)

Similar a Webサーバ、HTML

Similar a Webサーバ、HTML (20)

Más de Shuhei Iitsuka

Más de Shuhei Iitsuka (20)

Webサーバ、HTML