SlideShare a Scribd company logo
ウェブサーバ、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
●
    デザイン的なこと
    ●
        文字、画像、色、フォント
    ●
        配置、四角の辺と、どの辺がどの辺の基準になって
        いるか
要素、タグ、内容
<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 様から頂いているので、その方は僕か
    飯塚のほうまでメッセージ等でご相談ください

More Related Content

What's hot

#30 bddについて調べたことを丁寧に説明する
#30 bddについて調べたことを丁寧に説明する#30 bddについて調べたことを丁寧に説明する
#30 bddについて調べたことを丁寧に説明する
森下 智裕
 
WTM57 ミッション_おとのさまをすくいだせ
WTM57 ミッション_おとのさまをすくいだせWTM57 ミッション_おとのさまをすくいだせ
WTM57 ミッション_おとのさまをすくいだせ
Masanori Oobayashi
 
スライド4
スライド4スライド4
スライド4
優一郎 板谷
 
テーマの考え方
テーマの考え方テーマの考え方
テーマの考え方
tsukasa ohashi
 
CodeIgniterでXMLを処理してみる
CodeIgniterでXMLを処理してみるCodeIgniterでXMLを処理してみる
CodeIgniterでXMLを処理してみる
智之 大野
 
MT LOVE!
MT LOVE!MT LOVE!
MT LOVE!
Kaori Kotobuki
 
卒業発表 即戦力コース 1711期 木原 健児さん
卒業発表 即戦力コース 1711期 木原 健児さん卒業発表 即戦力コース 1711期 木原 健児さん
卒業発表 即戦力コース 1711期 木原 健児さん
DIVE INTO CODE Corp.
 
NUTハッカソン2014成果報告
NUTハッカソン2014成果報告NUTハッカソン2014成果報告
NUTハッカソン2014成果報告
Joe_noh
 
【Word press】記事一覧ページを作成する方法
【Word press】記事一覧ページを作成する方法【Word press】記事一覧ページを作成する方法
【Word press】記事一覧ページを作成する方法
H S
 
Fuel phpをcomposerに本気で対応させた時の話
Fuel phpをcomposerに本気で対応させた時の話Fuel phpをcomposerに本気で対応させた時の話
Fuel phpをcomposerに本気で対応させた時の話
Keishi Hosoba
 
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
Hiro H.
 
地獄のVimmer
地獄のVimmer地獄のVimmer
地獄のVimmer
Daisuke Masuyama
 
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
dioxy
 

What's hot (16)

#30 bddについて調べたことを丁寧に説明する
#30 bddについて調べたことを丁寧に説明する#30 bddについて調べたことを丁寧に説明する
#30 bddについて調べたことを丁寧に説明する
 
WTM57 ミッション_おとのさまをすくいだせ
WTM57 ミッション_おとのさまをすくいだせWTM57 ミッション_おとのさまをすくいだせ
WTM57 ミッション_おとのさまをすくいだせ
 
Screen
ScreenScreen
Screen
 
スライド4
スライド4スライド4
スライド4
 
テーマの考え方
テーマの考え方テーマの考え方
テーマの考え方
 
CodeIgniterでXMLを処理してみる
CodeIgniterでXMLを処理してみるCodeIgniterでXMLを処理してみる
CodeIgniterでXMLを処理してみる
 
MT LOVE!
MT LOVE!MT LOVE!
MT LOVE!
 
Ltthon2012
Ltthon2012Ltthon2012
Ltthon2012
 
卒業発表 即戦力コース 1711期 木原 健児さん
卒業発表 即戦力コース 1711期 木原 健児さん卒業発表 即戦力コース 1711期 木原 健児さん
卒業発表 即戦力コース 1711期 木原 健児さん
 
NUTハッカソン2014成果報告
NUTハッカソン2014成果報告NUTハッカソン2014成果報告
NUTハッカソン2014成果報告
 
FireFoxによるWebデザイン
FireFoxによるWebデザインFireFoxによるWebデザイン
FireFoxによるWebデザイン
 
【Word press】記事一覧ページを作成する方法
【Word press】記事一覧ページを作成する方法【Word press】記事一覧ページを作成する方法
【Word press】記事一覧ページを作成する方法
 
Fuel phpをcomposerに本気で対応させた時の話
Fuel phpをcomposerに本気で対応させた時の話Fuel phpをcomposerに本気で対応させた時の話
Fuel phpをcomposerに本気で対応させた時の話
 
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
 
地獄のVimmer
地獄のVimmer地獄のVimmer
地獄のVimmer
 
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
Dioxy : How To Presentation [HTML/CSSワークショップ #1 / パンくずリストを作ろう]
 

Viewers also liked

ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかた
Shuhei Iitsuka
 
Div span__object_があればいい
Div  span__object_があればいいDiv  span__object_があればいい
Div span__object_があればいい
Shuhei Iitsuka
 
Git をはじめよう
Git をはじめようGit をはじめよう
Git をはじめよう
Shuhei Iitsuka
 
UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表 UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表
Shuhei Iitsuka
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
Shuhei Iitsuka
 
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2
Shuhei Iitsuka
 

Viewers also liked (8)

ウェブサービスのつくりかた
ウェブサービスのつくりかたウェブサービスのつくりかた
ウェブサービスのつくりかた
 
Div span__object_があればいい
Div  span__object_があればいいDiv  span__object_があればいい
Div span__object_があればいい
 
メール入門
メール入門メール入門
メール入門
 
Git をはじめよう
Git をはじめようGit をはじめよう
Git をはじめよう
 
UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表 UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
 
PHP 入門
PHP 入門PHP 入門
PHP 入門
 
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2
 

Similar to Webサーバ、HTML

WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
Atsushi Tadokoro
 
今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋
Takuya Ueda
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
Hisateru Tanaka
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Takeshi Arabiki
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
 
PHPとJavaScriptの噺
PHPとJavaScriptの噺PHPとJavaScriptの噺
PHPとJavaScriptの噺
Shogo Kawahara
 
20090704rubyist九州
20090704rubyist九州20090704rubyist九州
20090704rubyist九州
koki_h
 
PHP初心者セッション2013
PHP初心者セッション2013PHP初心者セッション2013
PHP初心者セッション2013
Hideo Kashioka
 
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
Naoyuki Kataoka
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまで
Masataka Suzuki
 
HTTP入門
HTTP入門HTTP入門
HTTP入門
Sota Sugiura
 
HTTPとサーブレット
HTTPとサーブレットHTTPとサーブレット
HTTPとサーブレット
Takashi Makino
 
簡単なHTTPサーバの作成
簡単なHTTPサーバの作成簡単なHTTPサーバの作成
簡単なHTTPサーバの作成
Panu Avakul
 
HTML初心者向け勉強会
HTML初心者向け勉強会HTML初心者向け勉強会
HTML初心者向け勉強会
SakiKomuro
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
 
WCO2012「PHP教室」
WCO2012「PHP教室」WCO2012「PHP教室」
WCO2012「PHP教室」
Takuma Morikawa
 
GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
 

Similar to Webサーバ、HTML (20)

WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
 
今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋今日から始めるGopher - スタートGo #0 @GDG名古屋
今日から始めるGopher - スタートGo #0 @GDG名古屋
 
Pinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansaiPinoco phptal-phpcon-kansai
Pinoco phptal-phpcon-kansai
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
 
PHPとJavaScriptの噺
PHPとJavaScriptの噺PHPとJavaScriptの噺
PHPとJavaScriptの噺
 
20090704rubyist九州
20090704rubyist九州20090704rubyist九州
20090704rubyist九州
 
PHP初心者セッション2013
PHP初心者セッション2013PHP初心者セッション2013
PHP初心者セッション2013
 
web server
web serverweb server
web server
 
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
 
Webページが表示されるまで
Webページが表示されるまでWebページが表示されるまで
Webページが表示されるまで
 
HTTP入門
HTTP入門HTTP入門
HTTP入門
 
HTTPとサーブレット
HTTPとサーブレットHTTPとサーブレット
HTTPとサーブレット
 
簡単なHTTPサーバの作成
簡単なHTTPサーバの作成簡単なHTTPサーバの作成
簡単なHTTPサーバの作成
 
HTML初心者向け勉強会
HTML初心者向け勉強会HTML初心者向け勉強会
HTML初心者向け勉強会
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
WCO2012「PHP教室」
WCO2012「PHP教室」WCO2012「PHP教室」
WCO2012「PHP教室」
 
GDG Women DevfestW
GDG Women DevfestWGDG Women DevfestW
GDG Women DevfestW
 

More from Shuhei Iitsuka

Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition  a comprehensive...Online and offline handwritten chinese character recognition  a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
Shuhei Iitsuka
 
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorInferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
Shuhei Iitsuka
 
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
Shuhei Iitsuka
 
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networksProcedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
Shuhei Iitsuka
 
Generating sentences from a continuous space
Generating sentences from a continuous spaceGenerating sentences from a continuous space
Generating sentences from a continuous space
Shuhei Iitsuka
 
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
Shuhei Iitsuka
 
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Shuhei Iitsuka
 
Machine learning meets web development
Machine learning meets web developmentMachine learning meets web development
Machine learning meets web development
Shuhei Iitsuka
 
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるPython と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
Shuhei Iitsuka
 
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
Shuhei Iitsuka
 
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
Shuhei Iitsuka
 
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataAsia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Shuhei Iitsuka
 
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
Shuhei Iitsuka
 
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
Shuhei Iitsuka
 
ウェブサイトで収益を得る
ウェブサイトで収益を得るウェブサイトで収益を得る
ウェブサイトで収益を得る
Shuhei Iitsuka
 
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるHTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
 
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザインウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
Shuhei Iitsuka
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
Shuhei Iitsuka
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Shuhei Iitsuka
 

More from Shuhei Iitsuka (20)

Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition  a comprehensive...Online and offline handwritten chinese character recognition  a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
 
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorInferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
 
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
 
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networksProcedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
 
Generating sentences from a continuous space
Generating sentences from a continuous spaceGenerating sentences from a continuous space
Generating sentences from a continuous space
 
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
 
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
 
Machine learning meets web development
Machine learning meets web developmentMachine learning meets web development
Machine learning meets web development
 
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるPython と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
 
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
 
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
 
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataAsia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
 
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
 
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
 
ウェブサイトで収益を得る
ウェブサイトで収益を得るウェブサイトで収益を得る
ウェブサイトで収益を得る
 
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるHTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
 
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザインウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
 

Webサーバ、HTML

  • 2. 目次 ● 勉強会に参加するにあたって ● 今日、勉強すること ● とりあえず、やってみよう ● HTML を最低限書けるようになろう
  • 3. 勉強会に参加するにあたって ● 一週間に一回の勉強会に参加するということ ● 何かをするということ ● = 何かをしないということ ● 辛いこともあると思いますが、頑張っていきましょ う ● 勉強会の目的 ● ウェブサービスを立ち上げる、オールマイティにな ること ● この勉強会では、一つの技術にこだわっている時間 はない ● 必要な部分だけ素早く理解し、頑張っていきましょ う
  • 4. 勉強会に参加するにあたって ● もっとも重要なこと ● たぶん、この勉強会はつまらない ● 延々と「こういう風に書いたらこうなります」「こ うしたらこうなります」という話を聞き続けること になるから ● ウェブサービスを作るということは、泥臭くつまら ない、生産性を感じない長い長い作業の結晶である から ● 思ったより、華々しい世界ではない
  • 5. 今日、勉強すること ● ウェブを構成する 3 つの技術 ● HTML ● HTTP ● URI
  • 7. 今日、勉強すること ● ウェブサーバって何だろう?
  • 8. とりあえず、やってみよう! ● ターミナルを開こう ● ターミナルってなんでこんなの使うの? ● ターミナルからじゃないと、めんどくさいことがた くさんある。 ● ターミナルのほうが、慣れてくると効率が良い(か も)
  • 9. とりあえず、やってみよう # Apache2 (ウェブサーバのインストール) sudo apt-get install apache2 こういう感じのは、 あんまり使わない→
  • 10. とりあえず、やってみよう # Apache2 の設定 sudo vim /etc/apache2/sites-available/default # DocumentRoot を書き換えて公開するディレクトリを決める DocumentRoot /home/ubuntu/www 設定といえば、こんなの?→ ←いえ、こんなのです 一見難しそうだけど、そのうち慣れます
  • 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> のような / が先頭に付くタグは「閉じタグ」と 言う ● 要素 ● 開きタグ〜閉じタグまで含んで「要素」という ● 内容 ● 開きタグと、閉じタグの間にある部分を「内容」と いう
  • 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 様から頂いているので、その方は僕か 飯塚のほうまでメッセージ等でご相談ください