1
00:00:00,000 --> 00:00:01,390

2
00:00:01,390 --> 00:00:04,890
>> [音楽再生]

3
00:00:04,890 --> 00:00:10,955

4
00:00:10,955 --> 00:00:12,580
DAVID Jマラン：すべての権利、戻って歓迎します。

5
00:00:12,580 --> 00:00:13,600
これはCS50です。

6
00:00:13,600 --> 00:00:15,540
これは週7の終わりです。

7
00:00:15,540 --> 00:00:18,180
そして、それはそのスカベンジャーの終わりです
問題の狩りは4を設定

8
00:00:18,180 --> 00:00:19,220
あなたが思い出すかもしれない。

9
00:00:19,220 --> 00:00:21,650
のすべてを回復した後
スタッフのそれらのJPEG、

10
00:00:21,650 --> 00:00:24,820
あなたが好きな場合は、チャレンジした
できるだけ多くを自分で撮影する

11
00:00:24,820 --> 00:00:25,981
することができますように、これらの人々の。

12
00:00:25,981 --> 00:00:28,480
私たちは、提出の全体の束を持って
過去数週間で、

13
00:00:28,480 --> 00:00:32,980
正午前に確かに、かなりの数の右
今日、そのうちのいくつかは、ここにするものである

14
00:00:32,980 --> 00:00:37,670
アネンバーグlike--見えるin--ここにキャッチ
営業時間は、ここ1でホール

15
00:00:37,670 --> 00:00:39,530
ニックとのローウェル·ハウスで。

16
00:00:39,530 --> 00:00:41,750
ここでは携帯電話に巻き込まれるラモンだ。

17
00:00:41,750 --> 00:00:43,870
これはCS50ランチにあった。

18
00:00:43,870 --> 00:00:46,840
これはジェイソンSkypingとあった
より創造的な同級生、

19
00:00:46,840 --> 00:00:48,280
誰が彼にこのように電話をかけ。

20
00:00:48,280 --> 00:00:49,690
私たちは、これが何であったかわからない。

21
00:00:49,690 --> 00:00:51,940
>> [笑い]

22
00:00:51,940 --> 00:00:54,570
>> DAVID Jマラン：しかし
それはギガバイト価値がある。

23
00:00:54,570 --> 00:00:56,960
ここではチャンは、誰であるか
文字通りステージから走った

24
00:00:56,960 --> 00:01:00,480
1を撮影してくるのを防ぐために
一日が、最終的に逮捕された。

25
00:01:00,480 --> 00:01:02,050
ここでニックはある。

26
00:01:02,050 --> 00:01:03,480
ここでニックはある。

27
00:01:03,480 --> 00:01:04,080
ここでニックはある。

28
00:01:04,080 --> 00:01:05,090

29
00:01:05,090 --> 00:01:07,670
そしてここでアリソンはフィールドによってダウンしています。

30
00:01:07,670 --> 00:01:11,840
そしてZamylaも発見された
社交競争で。

31
00:01:11,840 --> 00:01:14,100
だから我々は通過します
これらの写真は、把握

32
00:01:14,100 --> 00:01:16,690
誰が提出されたほとんどの
最古の、そして報酬

33
00:01:16,690 --> 00:01:20,662
1素晴らしい賞品として、
スペックに約束した。

34
00:01:20,662 --> 00:01:23,120
そして、我々はまた、約フォローアップします
関与していたスペース。

35
00:01:23,120 --> 00:01:26,860
>> announcements--ので昼食のカップル
1:15 PMに、再び、今週の金曜日です。

36
00:01:26,860 --> 00:01:30,420
あなたは私たちに参加したい場合は、
ここでそのURLにRSVP。

37
00:01:30,420 --> 00:01:33,730
ジェイソンは1からここに再び表示されます
年のセクションのカップル

38
00:01:33,730 --> 00:01:35,510
背中、起こっている
ハロウィンに落下する。

39
00:01:35,510 --> 00:01:38,950
そして実際、彼が扮
その特定の年のカボチャ。

40
00:01:38,950 --> 00:01:42,700
あなたはこのセクションを見ると
彼の2011年から区間の

41
00:01:42,700 --> 00:01:46,480
8、あなたが興味があれば、
CS50.tvで、私は思います

42
00:01:46,480 --> 00:01:49,730
これは、年でした
彼の空気ポンプが働いていた。

43
00:01:49,730 --> 00:01:52,490
>> あなたはそれから見ると
2012年にも同じようなセクション、

44
00:01:52,490 --> 00:01:55,620
あなたは、はるかに収縮し、このジェイソンが表示されます
スーツは、もはや機能していないので、

45
00:01:55,620 --> 00:01:58,060
唯一言うことである
今週の金曜日、あなたが希望の場合

46
00:01:58,060 --> 00:02:02,720
Davenでカボチャを彫るのが好き
そしてゲイブなどは、ヘッドにRSVP

47
00:02:02,720 --> 00:02:04,480
cs50.harvard.eduアドレスにある。

48
00:02:04,480 --> 00:02:06,200
それはとても楽しいことを約束。

49
00:02:06,200 --> 00:02:08,660
Daven、私たちは言われ、彫刻しているしている
彼の人生のすべてをカボチャ。

50
00:02:08,660 --> 00:02:11,930
ブラジルからのガブリエルは決してありません
ハロウィン用のカボチャを刻んでいた。

51
00:02:11,930 --> 00:02:14,700
彼は学ぶように彼らとがある。

52
00:02:14,700 --> 00:02:16,830
>> セミナー、meanwhile--
ので、あなたはすぐに学びます

53
00:02:16,830 --> 00:02:20,650
私たちの期待が探しているものについて
本質的に最終的なプロジェクト、

54
00:02:20,650 --> 00:02:23,150
まで煮詰めるます
設計と実装

55
00:02:23,150 --> 00:02:26,440
興味のある任意のプロジェクトに対して最も
承認の対象とはいえ、あなた、

56
00:02:26,440 --> 00:02:28,490
そして、あなたの指導の仲間から指導。

57
00:02:28,490 --> 00:02:32,110
年末に向けて
学期、私たちは数を導入

58
00:02:32,110 --> 00:02:35,610
オプションのクラスであるセミナーの
指導フェロー、ハーバード率いる

59
00:02:35,610 --> 00:02:38,570
スタッフ、全体ではもちろんの友人
さまざまなトピックのキャンパス、その

60
00:02:38,570 --> 00:02:41,470
接線方向にある
もちろんの基礎となるシラバス

61
00:02:41,470 --> 00:02:45,590
それにもかかわらず、適用、楽しく、
潜在的な最終的なプロジェクトのために異なる。

62
00:02:45,590 --> 00:02:49,530
>> 例えば、第1、よろしければ
そこに、そのURLに頭を登録します。

63
00:02:49,530 --> 00:02:53,010
そして、これはためにラインナップです
今年だけのセミナー。

64
00:02:53,010 --> 00:02:56,060
しかし、我々は数十を持って実現する
過去数年からセミナー、すべての

65
00:02:56,060 --> 00:02:59,774
セミナーメニューにリンクされている
もちろんのウェブサイトのオプション。

66
00:02:59,774 --> 00:03:02,190
だから、あなたが考えている場合は、
あなたの快適ゾーンを越えて行く

67
00:03:02,190 --> 00:03:05,060
またはいくつかの新しいスキルを拾う、
例えば、iPhoneのプログラミング

68
00:03:05,060 --> 00:03:08,100
スウィフト、新しい言語でのアプリ
アップルまたはObjective-Cのから

69
00:03:08,100 --> 00:03:11,230
やAndroidのアプリやプログラミング[？合図？]
電球、またはトピックのいずれか

70
00:03:11,230 --> 00:03:15,490
ここより、原因チェックアップ
登録ページアウト。

71
00:03:15,490 --> 00:03:19,730
>> だから我々が始まり、上の結論
HTTPを見てと月曜日。

72
00:03:19,730 --> 00:03:22,675
だから、迅速refresher-- HTTP、
ハイパーテキスト転送プロトコル。

73
00:03:22,675 --> 00:03:24,045
しかし、それは本当に何を意味するのでしょうか？

74
00:03:24,045 --> 00:03:26,805

75
00:03:26,805 --> 00:03:27,930
それは本当に何を意味するのでしょうか？

76
00:03:27,930 --> 00:03:30,665

77
00:03:30,665 --> 00:03:31,290
その手はあり​​ますか？

78
00:03:31,290 --> 00:03:33,074

79
00:03:33,074 --> 00:03:34,740
私はあなただけであなたの頭を悩まている知っている。

80
00:03:34,740 --> 00:03:36,400
しかし、あなたは、HTTPが何であるかを提案したいですか？

81
00:03:36,400 --> 00:03:37,792

82
00:03:37,792 --> 00:03:40,576
>> 聴衆：どのようにコンピュータ
[聞こえない]と通信します。

83
00:03:40,576 --> 00:03:41,517

84
00:03:41,517 --> 00:03:43,100
DAVID Jマラン：私は最後の部分を逃した。

85
00:03:43,100 --> 00:03:45,774
コンピュータはwith--通信する方法

86
00:03:45,774 --> 00:03:47,325
>> 聴衆：インターネットサーバ。

87
00:03:47,325 --> 00:03:50,450
DAVID Jマラン：インターネット付きGood--
サーバ、および具体的には、Webサーバ。

88
00:03:50,450 --> 00:03:53,533
リコールので、一束あります
インターネット上のサービス、そのうちのいくつか

89
00:03:53,533 --> 00:03:57,349
あなたがチャットの間、毎日、おそらく使用
とメッセージ、チャット、およびWeb、および電子メール、

90
00:03:57,349 --> 00:03:57,890
等が挙げられる。

91
00:03:57,890 --> 00:04:00,900
とHTTPだけです
プロトコルそのWebブラウザ

92
00:04:00,900 --> 00:04:03,750
と通信するときに話す
Webサーバ、およびその逆。

93
00:04:03,750 --> 00:04:05,580
そしてアナログ
人間の世界では、可能性があります

94
00:04:05,580 --> 00:04:08,730
私はいくつかを振るために私の手を差し伸べる
他の人間の、彼または彼女

95
00:04:08,730 --> 00:04:11,970
拡張することで認めて
彼または彼女の手にも。

96
00:04:11,970 --> 00:04:13,970
だから、それはただのプロトコルですが、
一連の規則。

97
00:04:13,970 --> 00:04:15,630
>> そして、それらの規則は確かに何ですか？

98
00:04:15,630 --> 00:04:18,640
まあ、それはちょうどに集約
前後にメッセージを送信する、

99
00:04:18,640 --> 00:04:19,770
我々はここで描かれているように。

100
00:04:19,770 --> 00:04:22,520
そしていくつかの方法であります
そのあなたがこれらのメッセージを送信することができます。

101
00:04:22,520 --> 00:04:24,360
そしておそらく最も
共通はGETとして知られています。

102
00:04:24,360 --> 00:04:26,510
そして、我々は、コントラストが表示されます
この長い前。

103
00:04:26,510 --> 00:04:30,010
>> しかし、ブラウザからのGETリクエスト
サーバにだけこのようになります。

104
00:04:30,010 --> 00:04:32,960
それが置くことをテキストの束だ
仮想エンベロープの内側。

105
00:04:32,960 --> 00:04:35,854
そのエンベロープの外側に
詳細のカップルのピースを移動します。

106
00:04:35,854 --> 00:04:37,770
に行くために必要なもの
いわば封筒、

107
00:04:37,770 --> 00:04:41,820
のような要求を得るために
この私からWebサーバへ？

108
00:04:41,820 --> 00:04:42,320
うん。

109
00:04:42,320 --> 00:04:43,270
>> 読者：あなたのIPアドレス。

110
00:04:43,270 --> 00:04:45,890
>> DAVID Jマラン：私のIPアドレス
Fromフィールドで、いわば、

111
00:04:45,890 --> 00:04:49,490
そしてもちろん、
受信者のIPアドレス。

112
00:04:49,490 --> 00:04:52,710
しかし、ウェブ·パケットの場合には、
我々はもう少し詳細が必要です

113
00:04:52,710 --> 00:04:55,254
それはちょうどするのに十分ではありません
サーバに封筒を送って、

114
00:04:55,254 --> 00:04:57,670
そのサーバーは、可能性があるため
さまざまなタイプのリスニング

115
00:04:57,670 --> 00:04:59,180
インターネットトラフィックの。

116
00:04:59,180 --> 00:05:01,370
だから我々は他に何が必要なのですか
受信者のIP以外にも？

117
00:05:01,370 --> 00:05:02,723

118
00:05:02,723 --> 00:05:03,222
うん？

119
00:05:03,222 --> 00:05:04,241
>> 読者：それは、TCPですか？

120
00:05:04,241 --> 00:05:05,074
DAVID Jマラン：良い。

121
00:05:05,074 --> 00:05:06,470
TCP--

122
00:05:06,470 --> 00:05:07,340
>> 聴衆：アドレス。

123
00:05:07,340 --> 00:05:09,340
>> DAVID Jマラン：住所、
またはポート、それが呼ばれるように。

124
00:05:09,340 --> 00:05:11,010
近いが、TCPポート番号。

125
00:05:11,010 --> 00:05:12,220
そして、これらの束があります。

126
00:05:12,220 --> 00:05:14,310
しかし、確かにほとんどの
おなじみのはず結局

127
00:05:14,310 --> 00:05:17,590
デフォルトである80も
一つのWebトラフィックに使用。

128
00:05:17,590 --> 00:05:20,040
そしてもうお馴染み
1はすぐに443になります

129
00:05:20,040 --> 00:05:24,280
セキュアなWebのために使用される
トラフィック、httpsで始まるURL。

130
00:05:24,280 --> 00:05:26,650
>> だから、これは何が起こっている
その封筒の内側。

131
00:05:26,650 --> 00:05:29,780
とGET /ちょうど、与えることを意味
私はデフォルトのWebページ。

132
00:05:29,780 --> 00:05:32,700
私にハードのルートを与える
そのWebサーバー上に駆動します。

133
00:05:32,700 --> 00:05:36,050
うまくいけば、ウェブ
サーバーは、[OK]を、で応答します

134
00:05:36,050 --> 00:05:39,630
ただで数200、
すべて、はい、と言っ大会

135
00:05:39,630 --> 00:05:40,470
確かにOKです。

136
00:05:40,470 --> 00:05:41,680
こちらのページです。

137
00:05:41,680 --> 00:05:45,510
ウェブページのタイプには、起こっている
テキストであるが、より具体的には、HTML、

138
00:05:45,510 --> 00:05:47,010
どの我々は戻って飛び込むしようとしています。

139
00:05:47,010 --> 00:05:49,877
ドットドットだけドット
手段、ここではHTMLです。

140
00:05:49,877 --> 00:05:51,710
そしてそれはどこだ、私たち
今日の話を拾う、

141
00:05:51,710 --> 00:05:55,740
実際にHTMLを書いて、
どのハイパーテキストマークアップ言語、

142
00:05:55,740 --> 00:05:57,727
言語であるもので
ウェブページが書き込まれる。

143
00:05:57,727 --> 00:05:59,060
これは、プログラミング言語ではありません。

144
00:05:59,060 --> 00:06:01,270
何の機能がありません
またはループまたは条件。

145
00:06:01,270 --> 00:06:03,800
これは、マークアップ言語ですが、
同様に今日も参照してください。

146
00:06:03,800 --> 00:06:07,240
それはあなたが指定することができます
構造化型にはめるする方法

147
00:06:07,240 --> 00:06:09,300
審美的にWebページ。

148
00:06:09,300 --> 00:06:11,470
>> だから、これは1つだった
そしてページのみ、私たちは本当に

149
00:06:11,470 --> 00:06:13,930
簡潔にあれば月曜日に、見た。

150
00:06:13,930 --> 00:06:16,250
といくつかに気付く
顕著な特性。

151
00:06:16,250 --> 00:06:20,170
オープン角度付きがたくさんあり​​ます
ブラケットと近い角度付きブラケット。

152
00:06:20,170 --> 00:06:23,160
角度のついたものとの間での
ブラケットは言葉です。

153
00:06:23,160 --> 00:06:25,660
そして、我々は開始するつもりだ
それらの単語タグを呼び出す。

154
00:06:25,660 --> 00:06:28,800
だから、オープンブラケットヘッド
と閉じブラケットヘッド

155
00:06:28,800 --> 00:06:33,620
開閉タグがあり、
または開始タグと終了タグ

156
00:06:33,620 --> 00:06:37,660
それぞれ、HTML要素の、
我々はそれを呼ぶことにしますように、頭と呼ばれる。

157
00:06:37,660 --> 00:06:41,760
そして、同じ専門用語が適用されます
HTML内など身体へ。

158
00:06:41,760 --> 00:06:43,970
>> そして素敵なものですそれは
HTML--そして実際、我々はよ

159
00:06:43,970 --> 00:06:47,187
その上でひどく少し時間を過ごす、
あなたは、ほとんどがちょうど把握しますので、

160
00:06:47,187 --> 00:06:49,770
ときにそれが持っているものの特徴
実際に具体的な問題を抱えている

161
00:06:49,770 --> 00:06:52,820
あなたがそれを見つけることができますsolve--する
ブラウザはかなりダムです。

162
00:06:52,820 --> 00:06:56,450
それはちょうどとは違っていないdo--になるだろう
computer--何をすることを教え。

163
00:06:56,450 --> 00:06:59,279
だからあなたが開いているとき
非常に上部のブラケットのHTML

164
00:06:59,279 --> 00:07:01,320
そこに、その本質
ただねえ、ブラウザ、意味、

165
00:07:01,320 --> 00:07:04,090
ここではHTMLで書かれたWebページが付属しています。

166
00:07:04,090 --> 00:07:06,130
>> それは、オープンブラケットを見るとき
頭だけを意味し、

167
00:07:06,130 --> 00:07:10,350
ねえ、ブラウザは、ここに頭が来る、または
私のWebページの最上部。

168
00:07:10,350 --> 00:07:14,192
それは、閉じブラケットを見るとき
頭部、ちょうど意味、ちょっと、

169
00:07:14,192 --> 00:07:15,150
それは頭のためにそれだ。

170
00:07:15,150 --> 00:07:16,420
何か他のもののためにスタンバイ。

171
00:07:16,420 --> 00:07:18,878
そして何か他のものであること
どうやら体になるだろう。

172
00:07:18,878 --> 00:07:22,630
そして、あなたは同じように、タグを持っていないとき
あなただけこんにちは、カンマ、世界を持っている、

173
00:07:22,630 --> 00:07:26,610
それはちょうどその生のテキストになるだろう
最終的に画面に表示されます。

174
00:07:26,610 --> 00:07:29,220
>> さて、あなたはあまりにもわかります
ここでインデント。

175
00:07:29,220 --> 00:07:32,160
あなたはおそらく推測することができ
どのように我々はそれをstylizingいる。

176
00:07:32,160 --> 00:07:34,850
私は、タグを開くたびに、
いわば、私がインデント。

177
00:07:34,850 --> 00:07:38,540
私は閉じてたびに
タグ、私はアンインデント、

178
00:07:38,540 --> 00:07:40,690
中括弧とその精神においては似た。

179
00:07:40,690 --> 00:07:43,470
そして、それを超えて、私は親切だ
私の判断を使用する。

180
00:07:43,470 --> 00:07:48,380
私は打つ気にしませんでしたお知らせ
そのタイトルタグの内側に入力します。

181
00:07:48,380 --> 00:07:48,990
なぜ？

182
00:07:48,990 --> 00:07:51,920
まあ、私はちょうどそれが見えた決定
私には少しクリーナー、ヒト、

183
00:07:51,920 --> 00:07:53,181
ちょうどそれをやって気にしないように。

184
00:07:53,181 --> 00:07:54,930
だから、再び、いくつかがあります
判決は、単に呼び出す

185
00:07:54,930 --> 00:07:57,670
Cまたは任意の言語でありますように。

186
00:07:57,670 --> 00:08:04,110
>> しかし、あまりにも気づくこのインデントは、その
メンタルモデルに向いている、

187
00:08:04,110 --> 00:08:05,670
オーバーそれを複雑にしないように。

188
00:08:05,670 --> 00:08:07,020
しかし、ツリー、右？

189
00:08:07,020 --> 00:08:09,290
あなたがウェブを考える場合
ページ、明らかに書かれた

190
00:08:09,290 --> 00:08:12,050
このような、あるとして
うまく、そのようにインデント

191
00:08:12,050 --> 00:08:17,390
あなたはほとんど開いてブラケットと考えることができます
HTML閉ブラケットタグが画定されている

192
00:08:17,390 --> 00:08:21,380
ノードのルート、家系図
木々のスタイルでスタイルノード

193
00:08:21,380 --> 00:08:22,900
我々は先週の金曜日を見た。

194
00:08:22,900 --> 00:08:27,630
>> そして実際、我々はここで、右側にあります
私たちは、DOM、D-O-M、ドキュメントと呼ぶことにします何

195
00:08:27,630 --> 00:08:31,680
オブジェクトモデル、というのがファンシーな方法
そのHTMLを表しツリー。

196
00:08:31,680 --> 00:08:36,140
そしてHTMLは、私たちが言うだろう、持っていることに気付く
家系図、二人の子供のように。

197
00:08:36,140 --> 00:08:37,659
左側にヘッドである。

198
00:08:37,659 --> 00:08:39,179
右側に体がある。

199
00:08:39,179 --> 00:08:44,220
>> そして、ちょうど愚かな思考運動など、
ヘッドは、当然のことながら、どのように多くの子供があります

200
00:08:44,220 --> 00:08:46,070
この構造によれば？

201
00:08:46,070 --> 00:08:48,200
だから1、title--
そして我々が持っている理由です

202
00:08:48,200 --> 00:08:50,580
矢印は、タイトルに頭から行く。

203
00:08:50,580 --> 00:08:55,110
だから、その人であるかのようだ
家系図は一つの子孫であった。

204
00:08:55,110 --> 00:08:58,230
その後、タイトル自体ができ
あまりにも子供を持っていると言うこと。

205
00:08:58,230 --> 00:09:01,780
>> HTMLが持っていたことを思い出してください
こんにちは、カンマ、その下の世界。

206
00:09:01,780 --> 00:09:06,090
そして、私は単に以内にそれを描いた
代わりに四角形の楕円形だけ

207
00:09:06,090 --> 00:09:10,559
そのたとえ意味的に伝えるために
それはいわば、ツリー内のノードですが、

208
00:09:10,559 --> 00:09:12,100
それは一種の根本的に違う。

209
00:09:12,100 --> 00:09:12,800
それはタグではありません。

210
00:09:12,800 --> 00:09:14,780
またはより適切に、それは要素ではありません。

211
00:09:14,780 --> 00:09:16,590
あなたはかどうかは、単なるテキストノードだ。

212
00:09:16,590 --> 00:09:18,990
しかし、これらは完全にある
任意の人間の慣習。

213
00:09:18,990 --> 00:09:23,180
これはちょうど今の私の方法です
骨材として私はよを表す

214
00:09:23,180 --> 00:09:24,340
文書を呼び出します。

215
00:09:24,340 --> 00:09:27,750
>> 余談として、時の事
スーパー左上、

216
00:09:27,750 --> 00:09:32,080
オープンブラケット感嘆符ドキュメント
型HTMLは、これは、タグのように見える

217
00:09:32,080 --> 00:09:35,560
それはどこで愚かなコーナーケースです
それはコピー＆ペースト、ただそこにある

218
00:09:35,560 --> 00:09:38,460
ブラウザを指示する
これは、HTMLバージョン5である。

219
00:09:38,460 --> 00:09:41,540
世界はどのような変化し続け
ページ内のコードの最初の行は次のようになります。

220
00:09:41,540 --> 00:09:43,820
これは単にバージョン5を意味します。

221
00:09:43,820 --> 00:09:45,950
だから、それはかなりありません
他人のように見える。

222
00:09:45,950 --> 00:09:48,120
>> それとので、すべての権利
あなたが今感謝します、と述べ

223
00:09:48,120 --> 00:09:50,767
このかなりこの愚かな
タトゥー誰かが得た。

224
00:09:50,767 --> 00:09:51,990
>> [笑い]

225
00:09:51,990 --> 00:09:54,210
>> DAVID Jマラン：すべての権利、
そして今、実際にダイビングしてみましょう

226
00:09:54,210 --> 00:09:55,710
これで何かをするに。

227
00:09:55,710 --> 00:09:58,610
あなたは、その最後の時間を思い出すだろう
私はCS50アプライアンスを開いた

228
00:09:58,610 --> 00:10:01,650
と私はとして何かをした
開放geditのような単純な。

229
00:10:01,650 --> 00:10:05,190
と私も上のファイルを保存した
私のdesktop--どこspecial--

230
00:10:05,190 --> 00:10:05,870
hello.htmlとして。

231
00:10:05,870 --> 00:10:07,100

232
00:10:07,100 --> 00:10:10,984
>> だから私はそれをやらせる
again-- hello.htmlを入力してください。

233
00:10:10,984 --> 00:10:13,900
そして今、このファイルでは、私はするつもりだ
先に行くと、ちょうど何を私達を複製

234
00:10:13,900 --> 00:10:18,850
ドキュメントタイプのHTM​​L saw--それから私はするつもりです
オープンブラケットHTMLはブラケットを閉じてください。

235
00:10:18,850 --> 00:10:21,890
そして私は先制するつもりです
開いてタグを閉じます。

236
00:10:21,890 --> 00:10:22,390
なぜ？

237
00:10:22,390 --> 00:10:23,598
ちょうどので、私は後で忘れないでください。

238
00:10:23,598 --> 00:10:26,850
これは、開口部のように、ちょうど良いプラクティスです
と一斉に中括弧を閉じる。

239
00:10:26,850 --> 00:10:28,900
>> その後次に何が来たの？

240
00:10:28,900 --> 00:10:30,582
あなたは入れ墨と考えることができます。

241
00:10:30,582 --> 00:10:31,450
>> 聴衆：頭。

242
00:10:31,450 --> 00:10:32,500
>> DAVID Jマラン：頭。

243
00:10:32,500 --> 00:10:36,020
その後、ここで、私は
私が思うに、タイトルを持っていた。

244
00:10:36,020 --> 00:10:39,886
タイトルは任意だった、
こんにちは、世界に近いタイトル。

245
00:10:39,886 --> 00:10:42,760
その後、ここでダウンして、体の
我々はbodyタグを閉じcourse--。

246
00:10:42,760 --> 00:10:45,660
その後ちょうどやや冗長に、
私がダウンして、ここで同じことをしていた。

247
00:10:45,660 --> 00:10:47,150
>> だから私は、これはウェブページであると主張している。

248
00:10:47,150 --> 00:10:49,050
これは何かある
今ウェブ上で住むことができる、

249
00:10:49,050 --> 00:10:51,925
でも当然のも、それは文字通りの
今、私のデスクトップ上に住んでいる。

250
00:10:51,925 --> 00:10:55,837
しかし、確かに、私はgeditのを最小限に抑える場合には、
私は私のデスクトップのアイコンを表示されます。

251
00:10:55,837 --> 00:10:58,420
これは、アプライアンスであっても、
あなたは、Mac OS上でこれを行うことができます

252
00:10:58,420 --> 00:11:01,580
テキストエディットの有無にかかわらず
でも、メモ帳を使用してWindows。

253
00:11:01,580 --> 00:11:06,115
>> そして、私は先に行くと、ダブルクリックした場合
それも、としてみましょう、うまくselect--

254
00:11:06,115 --> 00:11:07,990
ので、それを選択しない
Chromeは開いていない。

255
00:11:07,990 --> 00:11:09,281
それでは先に行くとChromeを開いてみましょう。

256
00:11:09,281 --> 00:11:10,160

257
00:11:10,160 --> 00:11:14,040
その後のオープンについては、コマンド-Oを行う
そして、私のデスクトップに移動します

258
00:11:14,040 --> 00:11:15,320
そのファイルを開きます。

259
00:11:15,320 --> 00:11:20,120
つまり、ブラウザがどのように解釈するかである
HTML、上から下には、左から右へ。

260
00:11:20,120 --> 00:11:21,314
ねえ、ブラウザがここにはHTMLです。

261
00:11:21,314 --> 00:11:21,980
ここでは頭です。

262
00:11:21,980 --> 00:11:23,250
ここではタイトルです。

263
00:11:23,250 --> 00:11:24,090
ここでボディです。

264
00:11:24,090 --> 00:11:26,620
そして実際に、これはどのようにある
そのウェブページをレンダリングする。

265
00:11:26,620 --> 00:11:27,800
>> しかし、URLを気づく。

266
00:11:27,800 --> 00:11:32,430
あなたはどれも、この特定を引き上げることができなかった
今すぐあなたのラップトップ上のページ、

267
00:11:32,430 --> 00:11:34,910
も、あなたの内側
そのURLを経由して、アプライアンス、

268
00:11:34,910 --> 00:11:40,130
ファイルので：//は、それが実際だことを示し
私のファイルシステム上の、私のハードドライブ、

269
00:11:40,130 --> 00:11:40,990
ではないあなた。

270
00:11:40,990 --> 00:11:42,440
だから、これはすべてのことは有用ではありません。

271
00:11:42,440 --> 00:11:44,940
>> それでは向かって移動しましょう
実際のWebサーバーを使用。

272
00:11:44,940 --> 00:11:48,309
そして、それはCS50アプライアンスが判明
ここだけの環境以上のものです

273
00:11:48,309 --> 00:11:51,100
あなたは、Cコードを記述し、コンパイルすることができます
そして、これまで行ってきたようにそれを実行します。

274
00:11:51,100 --> 00:11:55,500
また、により構成されている
典型的なウェブを表現するスタッフ

275
00:11:55,500 --> 00:11:58,290
インターネット上のサーバー、
あなたが支払うかもしれない1

276
00:11:58,290 --> 00:12:00,210
いわゆるクラウド内でのOne。

277
00:12:00,210 --> 00:12:02,600
>> そして、それは実行している
標準的なフリーオープンソース

278
00:12:02,600 --> 00:12:06,160
ソフトウェアは、例えば、何か
おそらくと呼ばれるアパッチ、

279
00:12:06,160 --> 00:12:08,700
依然として最も人気のあるWeb
世界でのサーバーソフトウェア

280
00:12:08,700 --> 00:12:11,030
ウェブサイトの何千人もが今日使用すること。

281
00:12:11,030 --> 00:12:13,420
そしてそれはまた、さえあります
MySQLのようなソフトウェア、

282
00:12:13,420 --> 00:12:16,240
どのデータベース·サーバである
我々は最終的にに買ってあげることを、

283
00:12:16,240 --> 00:12:18,330
唯一言うことである
私は治療を開始することができ

284
00:12:18,330 --> 00:12:22,040
本格的なサ​​ーバーとしての私のアプライアンス
ことを私は他の場所のために払っていないよ。

285
00:12:22,040 --> 00:12:25,980
それはちょうどのために自分のラップトップ上で住んでいる
開発および便宜上の目的のために。

286
00:12:25,980 --> 00:12:27,870
>> それでは、先に行くとしましょう
これを利用する。

287
00:12:27,870 --> 00:12:30,120
私が先に行くつもりだと
ターミナルウィンドウを開きます。

288
00:12:30,120 --> 00:12:33,030
そして、私は先に行くつもりだと
最初私は、実際にmove--

289
00:12:33,030 --> 00:12:34,860
私のデスクトップに移動する予定。

290
00:12:34,860 --> 00:12:36,400
私はlsコマンドを実行すると、hello.htmlあります。

291
00:12:36,400 --> 00:12:37,022

292
00:12:37,022 --> 00:12:38,730
そして、私は行くつもりです
先行して使用を開始

293
00:12:38,730 --> 00:12:40,800
私たちがした新しいディレクトリ
今日の前に使用されていません。

294
00:12:40,800 --> 00:12:46,840
>> hello.html--私は移動するつもりです
仮想hosts--用../vhostsへ

295
00:12:46,840 --> 00:12:50,940
その後future--とのそれの詳細
localhostと呼ばれるディレクトリに、

296
00:12:50,940 --> 00:12:54,420
ほとんどに与えられたニックネームはある
任意のコンピュータ、それはMac、Windowsパソコンのかどうか、

297
00:12:54,420 --> 00:12:57,560
その後またはLinuxコンピュータ、および
特に我々のディレクトリに、

298
00:12:57,560 --> 00:13:01,260
スタッフはすでにときに作成
あなたが呼ばれるアプライアンスをダウンロードした

299
00:13:01,260 --> 00:13:01,760
パブリック。

300
00:13:01,760 --> 00:13:04,551
その名前は、何かを示唆するように
私は、理論的には、このフォルダに入れる

301
00:13:04,551 --> 00:13:07,790
今になるだろう
公共、少なくとも人々に

302
00:13:07,790 --> 00:13:10,030
ダイレクトを持っている人
私のコンピュータへの接続。

303
00:13:10,030 --> 00:13:13,160
>> だから今私が先に行くとしましょう
その同じディレクトリにcdを行う

304
00:13:13,160 --> 00:13:15,490
私は何見ることができます
上行くとタイプLS。

305
00:13:15,490 --> 00:13:17,630
そして実際、それはだ
そこに唯一のもの。

306
00:13:17,630 --> 00:13:23,250
私は今、私はこれを入れているので、と主張している
ディレクトリ内hello.htmlファイル

307
00:13:23,250 --> 00:13:26,940
ディレクトリの公共の内側と呼ばれる
ディレクトリの内側と呼ばれるローカルホスト

308
00:13:26,940 --> 00:13:29,810
これ、バーチャルホストと呼ばれる
CS50のスタッフのおかげ

309
00:13:29,810 --> 00:13:34,390
なるように事前に構成されている
Webサーバーのルート、

310
00:13:34,390 --> 00:13:36,900
私は今、うまくいけばこれを行うことができます。

311
00:13:36,900 --> 00:13:38,390
>> 私は、新しいタブを開くつもりです。

312
00:13:38,390 --> 00:13:40,090
そして、私はファイルにしない行くつもりです：//。

313
00:13:40,090 --> 00:13:44,520
私が実際に使用するつもりだ
HTTP / localhostを、どの

314
00:13:44,520 --> 00:13:47,470
再び、ニックネームはある
私自身のサーバー用。

315
00:13:47,470 --> 00:13:51,085
そして私は何に行くつもりです
ただ明確にする、ファイル名？

316
00:13:51,085 --> 00:13:52,680

317
00:13:52,680 --> 00:13:54,320
この物語は、おそらくどこに行くのですか？

318
00:13:54,320 --> 00:13:56,066

319
00:13:56,066 --> 00:13:56,565
hello.html。

320
00:13:56,565 --> 00:13:58,350

321
00:13:58,350 --> 00:14:04,270
>> 換言すれば、私は今までこの欲しい
私自身のコンピュータ、私自身のアプライアンスは、ある

322
00:14:04,270 --> 00:14:05,660
それは実際のサーバーだかのように。

323
00:14:05,660 --> 00:14:07,490
そのニックネームはlocalhostです。

324
00:14:07,490 --> 00:14:10,210
しかし、localhostの考えなど
Facebook.com google.com、何でも。

325
00:14:10,210 --> 00:14:11,600
それはちょうど私のローカル名です。

326
00:14:11,600 --> 00:14:14,810
そして私が望む最後のはです
ハードドライブのルート、いわば、

327
00:14:14,810 --> 00:14:17,729
またはウェブサーバのルート
その後スラッシュをエルゴと

328
00:14:17,729 --> 00:14:18,770
ファイル名のhello.html。

329
00:14:18,770 --> 00:14:19,880

330
00:14:19,880 --> 00:14:21,930
>> 私はズームアウトし、Enterキーを押してみましょう。

331
00:14:21,930 --> 00:14:24,266
そして実際、今私のWebページがある。

332
00:14:24,266 --> 00:14:25,390
だから、少し違う。

333
00:14:25,390 --> 00:14:26,880
そして、それは同じようにがっかりだ。

334
00:14:26,880 --> 00:14:27,904
これは、古いバージョンです。

335
00:14:27,904 --> 00:14:29,070
私は戻ってフォントを縮小してみましょう。

336
00:14:29,070 --> 00:14:29,745
これは古いです。

337
00:14:29,745 --> 00:14:30,890
これが新たに追加されました。

338
00:14:30,890 --> 00:14:35,430
しかし、根本的に何が起こっている
現在、HTTPが使用されていることである。

339
00:14:35,430 --> 00:14:39,344
>> それではこのもう少し明確にしてみましょうか、
あなたがする場合は、もう少し複雑。

340
00:14:39,344 --> 00:14:41,760
私は右下へ行こう
私のアプライアンスの隅。

341
00:14:41,760 --> 00:14:44,000
そして、すべてこのことに気づく
時間は、数がなされています。

342
00:14:44,000 --> 00:14:47,330
つまり、固有のアドレスである
あなたのCS50アプライアンスの。

343
00:14:47,330 --> 00:14:50,800
それは、プライベートアドレスだ
172.16によって暗示として、

344
00:14:50,800 --> 00:14:53,860
これだけであなただけの物理的意味
このWebサーバにアクセスすることができます。

345
00:14:53,860 --> 00:14:56,340
すべてがファイアウォールされており、
素敵な休息から保護

346
00:14:56,340 --> 00:14:58,130
このため、世界のアドレッシング。

347
00:14:58,130 --> 00:15:01,920
>> 私が行けば、今でも気付く
ではない私のアプライアンスでこのアドレス、

348
00:15:01,920 --> 00:15:04,340
が、Mac OS--に私が行くよ
こっち戻ります。

349
00:15:04,340 --> 00:15:05,930
これは今私のMacです。

350
00:15:05,930 --> 00:15:08,460
そして今、私は開くつもりだ
ここでのChromeのこのバージョン。

351
00:15:08,460 --> 00:15:17,370
そして、私は、httpに行くつもりです。//172.16.25
/私はrest-- 133を忘れる。

352
00:15:17,370 --> 00:15:25,210
>> だから私は私のMacから訪問するつもりだ
そのIPアドレスは入力し/hello.html。

353
00:15:25,210 --> 00:15:29,850
そして今、私は自分のMacから参照してください。
のMy CS50アプライアンス、その

354
00:15:29,850 --> 00:15:32,600
IPアドレスは、ということです
数、実際に動作している

355
00:15:32,600 --> 00:15:34,320
インターネット上のウェブサーバのように。

356
00:15:34,320 --> 00:15:36,944
それはに簡単に素敵なを持っていません
Facebook.comのように名前を覚えて、

357
00:15:36,944 --> 00:15:40,370
それはHTTPを使っている
どうやら、たとえクローム

358
00:15:40,370 --> 00:15:43,560
種類の世界を簡素化されている
私たちのためではなく、HTTPを私たちに示していない。

359
00:15:43,560 --> 00:15:46,210
しかし、これは確かに、まさにそれである。

360
00:15:46,210 --> 00:15:48,470
Chromeはほんの一部を保存している
このごろキーストローク。

361
00:15:48,470 --> 00:15:50,530
そして、それは我々が今見ているものだ。

362
00:15:50,530 --> 00:15:51,890
>> だから、すべての罰金と良いことだ。

363
00:15:51,890 --> 00:15:53,740
しかし、それはかなりがっかりページです。

364
00:15:53,740 --> 00:15:56,230
私は中に入って何かをやってみましょう
今少し異なる。

365
00:15:56,230 --> 00:15:57,910
だから私はgeditのに戻ってみましょう。

366
00:15:57,910 --> 00:16:00,580
代わりにハローの、
世界は、の画像を入れてみましょう。

367
00:16:00,580 --> 00:16:05,880
そして、私は私が行かせbefore--から主張
私のlocalhostのディレクトリ公衆へ。

368
00:16:05,880 --> 00:16:10,580
そして、私が先に行くと、コピーしてみましょう
今日からのファイルの全体の束

369
00:16:10,580 --> 00:16:15,633
私のDropboxフォルダからこちらへ。

370
00:16:15,633 --> 00:16:19,470

371
00:16:19,470 --> 00:16:21,680
>> 今、私はlsと入力すると、見て
すべてのこれらのファイルで

372
00:16:21,680 --> 00:16:24,940
私はによって配布したので
今日の事前にコースのウェブサイト、

373
00:16:24,940 --> 00:16:26,830
一つは、まだhello.htmlある。

374
00:16:26,830 --> 00:16:27,830
だから1があります。

375
00:16:27,830 --> 00:16:30,730
そして、この愚かな1をリコール
最後time-- cat.jpgから。

376
00:16:30,730 --> 00:16:34,550
だから私は、埋め込むしてみましょう
私のWebページの内部cat.jpg。

377
00:16:34,550 --> 00:16:37,690
>> 私が先に行くつもりです
そして、cat.jpgを行い保存します。

378
00:16:37,690 --> 00:16:38,950
私はクロームに戻ってみましょう。

379
00:16:38,950 --> 00:16:41,140
そして私は、ズームインしましょう
フォントと今リロード。

380
00:16:41,140 --> 00:16:43,090

381
00:16:43,090 --> 00:16:45,030
おっと、私はこれをどこに置く？

382
00:16:45,030 --> 00:16:48,210

383
00:16:48,210 --> 00:16:51,520
Standby--私はまだ古いを持っている
私のデスクトップのオープンからバージョン。

384
00:16:51,520 --> 00:16:56,020
だから私の、私のバーチャルホストに行こう
localhostを、私のパブリック、およびhello.html。

385
00:16:56,020 --> 00:16:57,320

386
00:16:57,320 --> 00:17:00,670
だから今私が先に行くとしましょう
身体の内側cat.jpgを言う

387
00:17:00,670 --> 00:17:02,830
私はそれになりたい場所
表示され、リロード。

388
00:17:02,830 --> 00:17:04,560
もちろん、これは正しくありません。

389
00:17:04,560 --> 00:17:08,050
>> だから私は、ブラウザを少し伝える必要があります
もっと意図的に私はそれが何をしたいか。

390
00:17:08,050 --> 00:17:10,210
単純に名前を入力している
明らかに十分ではない。

391
00:17:10,210 --> 00:17:15,134
だから、別のがあったことを思い出す
タグ、画像、略してIMG。

392
00:17:15,134 --> 00:17:17,550
それはちょうどので、人間だ
タイプフル言葉が好きではありません。

393
00:17:17,550 --> 00:17:19,050
そして、我々は、ソース= "cat.jpg"を行うことができます。

394
00:17:19,050 --> 00:17:21,470

395
00:17:21,470 --> 00:17:23,550
>> そして今、私は何をするつもりです
ここでは異なる一つのこと。

396
00:17:23,550 --> 00:17:25,390
のにもかかわらず、すべての
我々のタグは、これまで持っている

397
00:17:25,390 --> 00:17:28,086
この概念を持っていた
開始タグと終了タグ

398
00:17:28,086 --> 00:17:30,210
それは本当にありません
画像用のセンス、右？

399
00:17:30,210 --> 00:17:32,430
イメージは、どちらかそこがあるか。

400
00:17:32,430 --> 00:17:36,650
だから人間が来た
単純な規則で最大。

401
00:17:36,650 --> 00:17:40,310
あなたは、両方の可能なタグを持っている場合
同じtime--で開始および終了

402
00:17:40,310 --> 00:17:43,790
ただspeak--するので、それは、空にすることができます
タグの内側にスラッシュを入れて

403
00:17:43,790 --> 00:17:44,710
最後の最後で。

404
00:17:44,710 --> 00:17:45,776

405
00:17:45,776 --> 00:17:47,150
今、私は私のブラウザに戻ってみましょう。

406
00:17:47,150 --> 00:17:50,377
くそーリロードを打つ、何かが間違っている。

407
00:17:50,377 --> 00:17:52,460
あなたはおそらくこれを見てきました
時折ウェブ上、

408
00:17:52,460 --> 00:17:53,600
場合でも、それはあなたのせいではなかっだ。

409
00:17:53,600 --> 00:17:54,766
これは、Webサーバのせいです。

410
00:17:54,766 --> 00:17:56,240
何頌歌これが示しているように思わ？

411
00:17:56,240 --> 00:17:57,450

412
00:17:57,450 --> 00:17:58,009
それは壊れている。

413
00:17:58,009 --> 00:17:59,300
画像が属するところである。

414
00:17:59,300 --> 00:17:59,700
うん？

415
00:17:59,700 --> 00:18:01,560
>> 聴衆：しかし、それはしません
画像へのアクセス権を持っている。

416
00:18:01,560 --> 00:18:03,070
>> DAVID Jマラン：それはない
画像へのアクセス権を持っている。

417
00:18:03,070 --> 00:18:05,230
その、またはさらに悪いことに、多分
それも存在しません。

418
00:18:05,230 --> 00:18:06,729
我々はそれを診断できない場合は、見てみましょう。

419
00:18:06,729 --> 00:18:09,390
前回からリコールすれば、その
Chromeで、アプライアンスでは、

420
00:18:09,390 --> 00:18:11,870
あるいはあなたのMacまたはPC上で、
あなたが開発者メニューに移動

421
00:18:11,870 --> 00:18:14,650
と開発者ツールに行く
オプション、おそらくあなたがした

422
00:18:14,650 --> 00:18:16,850
今までずっとかを使用していない。

423
00:18:16,850 --> 00:18:20,780
そして、私はネットワークに行けば
とページをリロード、

424
00:18:20,780 --> 00:18:24,110
それでは実際にはHTTPを見てみましょう
行われている要求。

425
00:18:24,110 --> 00:18:28,400
>> hello.htmlがあるように見えます
したがって200、確かにOK。

426
00:18:28,400 --> 00:18:30,630
しかしcat.jpgは403である。

427
00:18:30,630 --> 00:18:31,650
だから、404ではありません。

428
00:18:31,650 --> 00:18:33,490
ファイルは、おそらく存在します。

429
00:18:33,490 --> 00:18:35,250
403は禁止を意味します。

430
00:18:35,250 --> 00:18:37,790
だから、これは少し混乱しています。

431
00:18:37,790 --> 00:18:42,340
私は戻って行くつもりです
私の端末ウィンドウに。

432
00:18:42,340 --> 00:18:43,700
私はここまで拡大してみましょう。

433
00:18:43,700 --> 00:18:44,750
そして、私はlsとやらせる。

434
00:18:44,750 --> 00:18:46,430
それらの同じファイルがあります。

435
00:18:46,430 --> 00:18:49,410
>> 今、私はLS-Lをやらせる、
あなたはおそらく済ませた

436
00:18:49,410 --> 00:18:53,350
ファイルを見るために前に使用
多分サイズやタイムスタンプ。

437
00:18:53,350 --> 00:18:55,590
そして、我々は全体の束を参照してください
圧倒的な情報。

438
00:18:55,590 --> 00:18:57,040
しかし、いくつかの詳細に注目してください。

439
00:18:57,040 --> 00:19:01,660
ここでは、この中でhello.htmlだ
行はこことここcat.jpgだ。

440
00:19:01,660 --> 00:19:02,934

441
00:19:02,934 --> 00:19:05,850
そして、それはあることだけで、アプライアンスの
JPEGの強調表示によるユーザーフレンドリー

442
00:19:05,850 --> 00:19:07,380
このような紫で。

443
00:19:07,380 --> 00:19:11,470
しかし、ほかに何かすることは横に異なっている
ファイルサイズとファイル名？

444
00:19:11,470 --> 00:19:13,438

445
00:19:13,438 --> 00:19:14,754
>> 読者：[聞こえない]。

446
00:19:14,754 --> 00:19:16,920
DAVID Jマラン：ええ、あります
さらに2つのRはこっち。

447
00:19:16,920 --> 00:19:20,170
hello.htmlが起こったかに注目してください。

448
00:19:20,170 --> 00:19:24,050
だから、名前のことが判明
このディレクトリの国民が重要です。

449
00:19:24,050 --> 00:19:26,400
このディレクトリには何も
パブリックであることを意味する。

450
00:19:26,400 --> 00:19:28,790
しかし、それは十分ではありません
ちょうどそこにファイルをドロップします。

451
00:19:28,790 --> 00:19:31,480
また、変更する必要があります
ファイルのモード

452
00:19:31,480 --> 00:19:35,180
のパーミッションを変更
ではない積極的にファイル

453
00:19:35,180 --> 00:19:37,650
デフォルトの設定であること、
これは私が読むことができるということです

454
00:19:37,650 --> 00:19:39,220
と私は所有者である、それを書く。

455
00:19:39,220 --> 00:19:43,540
私は、全世界がみんなにしたい
いわば、私のファイルを読むことができる。

456
00:19:43,540 --> 00:19:44,950
読むだけでそれを見ることを意味します。

457
00:19:44,950 --> 00:19:49,780
>> そして実際、あなたが問題に見るよう
7を設定し、それがどのようなこれらの研究の平均です。

458
00:19:49,780 --> 00:19:53,160
これらの二つのRの平均値は、誰を聞かせて
他の世界でも、それを読む

459
00:19:53,160 --> 00:19:55,300
特に今その
それは、このディレクトリにあります。

460
00:19:55,300 --> 00:19:59,620
だから、これを修正する最も簡単な方法はにある
私のプロンプトに移動し、変更のためには、chmodを行う

461
00:19:59,620 --> 00:20:05,580
モードその後完全に、+ rを行い、
誰もが、すべてに加え、読み取りのためのR、

462
00:20:05,580 --> 00:20:07,944
と入力し、Enter cat.jpg。

463
00:20:07,944 --> 00:20:10,360
何も、起こらないように見えるもの
通常は良い​​事を意味します。

464
00:20:10,360 --> 00:20:13,850
今again--だから、LS-L
cat.jpgを見てみましょう。

465
00:20:13,850 --> 00:20:15,750
そして、この許可
変更されているように見える。

466
00:20:15,750 --> 00:20:18,670
余談として、あなたが作る場合は、
ミスし、例えば、

467
00:20:18,670 --> 00:20:23,210
ちょうど私がエッセイをknow--ませんyour--た
事故による公的にアクセス可能な、

468
00:20:23,210 --> 00:20:25,480
あなたは反対のことを行うことができ、-rはchmodする。

469
00:20:25,480 --> 00:20:25,909

470
00:20:25,909 --> 00:20:28,200
率直に言っても、それはすべきでない
publicディレクトリにある

471
00:20:28,200 --> 00:20:29,760
とにかくそれが心配だ場合。

472
00:20:29,760 --> 00:20:32,475
>> だから今のはに戻ってみましょう
私のブラウザとリロード。

473
00:20:32,475 --> 00:20:32,904

474
00:20:32,904 --> 00:20:34,820
そして、私はクリックするつもりです
少しゴーストバスターズ

475
00:20:34,820 --> 00:20:38,030
のその部分をクリアするシンボル
画面には、私たちは新しい要求を見ることができます。

476
00:20:38,030 --> 00:20:40,630
そして実際、ここにある
前から不機嫌猫。

477
00:20:40,630 --> 00:20:43,010
しかし、もっと重要なのは、
技術的には、そこにある

478
00:20:43,010 --> 00:20:45,565
番号200、その
我々はそれがOKだことを意味します。

479
00:20:45,565 --> 00:20:47,190
すべての権利、それはすべての罰金と良いことだそう。

480
00:20:47,190 --> 00:20:48,940
しかし、我々は行っていない
ウェブサイトの最高の、

481
00:20:48,940 --> 00:20:51,967
また、私たちはあまりにもハードしようとしている
ウェブサイトのファンシー今日を作る。

482
00:20:51,967 --> 00:20:54,550
しかし、ここで、少なくとも何かをやらせる
カタカタ前にスーパー馴染み

483
00:20:54,550 --> 00:20:56,030
他のいくつかのタグをオフにします。

484
00:20:56,030 --> 00:20:58,470
だから私はちょうどここに猫を望んでいないと仮定します。

485
00:20:58,470 --> 00:21:02,530
私は実際にこれをするとします
猫は何かにリンクする。

486
00:21:02,530 --> 00:21:07,210
>> 私はともかく、例えば
このような何かを。

487
00:21:07,210 --> 00:21:08,580

488
00:21:08,580 --> 00:21:12,890
ためのアンカーのhrefのため
ハイパーリファレンスequals--

489
00:21:12,890 --> 00:21:17,440
そしてちょうど何かをやらせる
www.google.comに近いような

490
00:21:17,440 --> 00:21:19,540
閉じ括弧を引用。

491
00:21:19,540 --> 00:21:22,000
そして今、猫を検索します。

492
00:21:22,000 --> 00:21:23,520
閉じるアンカータグ。

493
00:21:23,520 --> 00:21:26,760
だから、これは1つの並べ替えを持って
根本的に新しいディテールの。

494
00:21:26,760 --> 00:21:28,190
もちろん、タグが、異なっている。

495
00:21:28,190 --> 00:21:31,770
これは、アンカーの名前Aの
HREFまたはハイパー参照。

496
00:21:31,770 --> 00:21:35,269
>> しかし、もっと重要なのは、あります
ここで、この構文機能。

497
00:21:35,269 --> 00:21:37,810
これは、我々が呼び出しを開始しますものです
ていないタグ、属性。

498
00:21:37,810 --> 00:21:40,830
そして属性は、そのものです
タグの動作を変更します。

499
00:21:40,830 --> 00:21:45,400
この属性、hrefの手段
このアンカーの動作を変更

500
00:21:45,400 --> 00:21:48,430
それがクリックさたときに、
それはここに、このURLに行きます。

501
00:21:48,430 --> 00:21:50,330
そしてもちろん、そのURLは、Googleである。

502
00:21:50,330 --> 00:21:53,951
>> 一方、これは何ですか
テキストはここになるだろう？

503
00:21:53,951 --> 00:21:55,950
まあ、それはなるだろう
実際にどのような人間

504
00:21:55,950 --> 00:21:58,470
下線のように見ている
リンク、そのような単純な。

505
00:21:58,470 --> 00:21:59,220
それでは、これを試してみましょう。

506
00:21:59,220 --> 00:21:59,980
私はそれを保存してみましょう。

507
00:21:59,980 --> 00:22:01,650
私はhello.htmlまだよ。

508
00:22:01,650 --> 00:22:05,360
しかし、オンラインのバージョンでは、あなたが表示されます
私たちは、準備されたプレ実際のファイル名。

509
00:22:05,360 --> 00:22:06,805
私が先に行くと、リロードしてみましょう。

510
00:22:06,805 --> 00:22:08,680
そして今、それは非常にです
それでもがっかりページ。

511
00:22:08,680 --> 00:22:10,910
しかし、私は上にマウスを移動した場合there--
そしてそれは少し小さいですが、

512
00:22:10,910 --> 00:22:13,576
but--あなたが底に見ることができます
画面の左上隅、

513
00:22:13,576 --> 00:22:15,242
それは確かにgoogle.comになるだろう。

514
00:22:15,242 --> 00:22:19,280
私はそれをクリックした場合と、それは意志
私に実際のGoogleへの道を泡立て器。

515
00:22:19,280 --> 00:22:22,610
>> しかし、ここでの機会に気づく
ただ余談として搾取、。

516
00:22:22,610 --> 00:22:25,150
そして、私たちは相互に戻ってくる
長い前に、セキュリティの問題。

517
00:22:25,150 --> 00:22:29,290
この二分法がありますので
あなたが行くとあなたの言うところの間に、

518
00:22:29,290 --> 00:22:34,722
あなたのような何かができる
this-- http://www.google.com。

519
00:22:34,722 --> 00:22:37,134
[OK]を、今私がリロードした場合
そのページを保存した後、

520
00:22:37,134 --> 00:22:38,800
私はGoogleに行くつもりのように見えます。

521
00:22:38,800 --> 00:22:40,966
しかし、理由はありません、私
Googleに行かなければならない、右？

522
00:22:40,966 --> 00:22:47,460
私は実際のような何かに行くことができる
badguy.com、こっちのページをリロードしてください。

523
00:22:47,460 --> 00:22:49,750
と通知は、それはまだGoogleのように見えます。

524
00:22:49,750 --> 00:22:52,020
そして、私はシャープだ場合にのみ、
こっちにホバリングするのに十分な

525
00:22:52,020 --> 00:22:54,770
私はそれがあってもために起こっている見ていますか
別の場所に移動します。

526
00:22:54,770 --> 00:22:57,400
>> あなたがこれまで得ているのであれば
特に電子メール、

527
00:22:57,400 --> 00:22:59,610
ペイパルから1つ、または
一見ペイパルから

528
00:22:59,610 --> 00:23:01,830
ログインするためにあなたを求めて
あなたのアカウントに、この

529
00:23:01,830 --> 00:23:06,380
なぜあなたはいけないです
これまでの電子メール内のリンクをクリックして、

530
00:23:06,380 --> 00:23:07,930
率直に言って、電子メール内の任意のリンク。

531
00:23:07,930 --> 00:23:10,380
あなたが知っている場合は、実際持っている
ペイパルまたは銀行にお金

532
00:23:10,380 --> 00:23:14,250
アメリカまたはフィデリティまたはいずれかの
ウェブサイトは、それを手動で入力します。

533
00:23:14,250 --> 00:23:17,530
それがいかに簡単であるかに見えるので、
何を提示に誰かをだまし

534
00:23:17,530 --> 00:23:18,526
リンクのように見えます。

535
00:23:18,526 --> 00:23:20,400
しかし、それは実際に可能性
絶対にどこにでも行く。

536
00:23:20,400 --> 00:23:23,301
>> そしてはるかに大きなあります
これよりも脅威。

537
00:23:23,301 --> 00:23:25,300
実際には、これはビットである
接線の今が、一

538
00:23:25,300 --> 00:23:28,430
私が今まで見た最高のものの
それ以来、閉鎖されています

539
00:23:28,430 --> 00:23:34,060
誰かが人を導いている
、これは言うかもしれないのでto--

540
00:23:34,060 --> 00:23:37,660
あなたへのログインにはこちらをクリック
アカウント、銀行口座。

541
00:23:37,660 --> 00:23:40,985
そして、これはバンク·オブ·ザ·ウェストだった。

542
00:23:40,985 --> 00:23:43,030

543
00:23:43,030 --> 00:23:44,250
>> だから、誰かがこれを買った。

544
00:23:44,250 --> 00:23:47,090
そして、それは見るために少し簡単です
それズームモノラル間隔のフォントで

545
00:23:47,090 --> 00:23:49,190
30フィートのプロジェクターの中で。

546
00:23:49,190 --> 00:23:51,720
しかし、それは小さなフォントでだとき
あなたが受信している電子メール、

547
00:23:51,720 --> 00:23:54,690
これはbankofthewest.comように見えますが、
いないbankofthevvest.com、

548
00:23:54,690 --> 00:23:58,230
その誰かが買うために10ドルを支払っていた。

549
00:23:58,230 --> 00:24:00,840
そして、これはにそれらを導いた
いくつかの悪いウェブサイトの同等。

550
00:24:00,840 --> 00:24:05,540
>> そして、あなたは実際に私たちが行うことができますtoo--表示されます
私は、実際のウェブサイトに行けば、this--

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com、再び、
前回からのリコール

552
00:24:10,335 --> 00:24:13,210
これは自分のWebページである場合にと
あなたはそれがどのように機能するかについての興味が、

553
00:24:13,210 --> 00:24:15,610
あなたは確かに行くことができます
Chromeの開発者ツール。

554
00:24:15,610 --> 00:24:18,890
そして、あなたはすべてを見ることができます
HTMLはきれいにそこにフォーマット。

555
00:24:18,890 --> 00:24:20,890
>> しかし、ポイントにより、
あなたがのが閉じてみましょうcam--

556
00:24:20,890 --> 00:24:24,760
あなたがビューに行くことができるthis--
デベロッパーソースの表示。

557
00:24:24,760 --> 00:24:25,770

558
00:24:25,770 --> 00:24:28,350
なぜ私はちょうどコピーしないでください
すべてのことそして私

559
00:24:28,350 --> 00:24:31,630
私の小さなgeditのウィンドウに行くことができます
ここで、自分のWebページを作る。

560
00:24:31,630 --> 00:24:33,210
hello.htmlでこれを保存します。

561
00:24:33,210 --> 00:24:36,770
おそらくこれは、破るしようとしている
それは通常、この簡単ではありませんので。

562
00:24:36,770 --> 00:24:41,590
しかし、私は私の自身のページをリロードした場合、今
私自身のCS50 Applianceおよびリロードヒット、

563
00:24:41,590 --> 00:24:42,990
[OK]を、いくつかのものが壊れた。

564
00:24:42,990 --> 00:24:45,750
しかし、私は持つことにかなり近いよ
私自身の銀行のウェブサイトは、右？

565
00:24:45,750 --> 00:24:46,570
このすべてHTML--

566
00:24:46,570 --> 00:24:47,370
>> [笑い]

567
00:24:47,370 --> 00:24:49,210
>> DAVID Jマラン：--I
actually--しませんでした

568
00:24:49,210 --> 00:24:52,210
誰かがそこにあります知っている人
実際にあまりにもこれらのリンクをクリックしますでしょう。

569
00:24:52,210 --> 00:24:54,864
そうはっきり、いくつかのものが壊れた。

570
00:24:54,864 --> 00:24:56,780
しかし、それはリードして起こっている
議論に私達、

571
00:24:56,780 --> 00:25:00,810
不必要に、今、何に関して
CSSは、カスケーディング·スタイル·シートは、ある

572
00:25:00,810 --> 00:25:03,410
実際に、どのよう
他のHTMLファイルをダウンロード

573
00:25:03,410 --> 00:25:06,140
とJPEGはGIFファイルを提出すること
ウェブサイトでは、使用している場合があります。

574
00:25:06,140 --> 00:25:07,960
しかし、それのすべてが達成できるである。

575
00:25:07,960 --> 00:25:11,110
しかし、それは本当にに集約
これらの非常に単純な経験則。

576
00:25:11,110 --> 00:25:14,450
>> だから今ちょうど拾い読みしましょう
HTMLのの他の例のカップル

577
00:25:14,450 --> 00:25:16,680
ちょうどあなたに意味を与えるために
あなたができる他に何の。

578
00:25:16,680 --> 00:25:18,670
例えば、これはするlist.htmlある。

579
00:25:18,670 --> 00:25:23,240
私は、Webページを作りたかったとします
クワッド内の家屋のリスト。

580
00:25:23,240 --> 00:25:28,960
私は、順序付けられていないため、ULタグを使用する場合があります
リスト、リスト項目の子

581
00:25:28,960 --> 00:25:33,760
その後、over--またはリストを反復処理
問題の家をrather--。

582
00:25:33,760 --> 00:25:36,080
>> 私がこれを開くなら、はこのやろう。

583
00:25:36,080 --> 00:25:40,670
それではhello.htmlしないように行こう、
しかしするlist.htmlへ。

584
00:25:40,670 --> 00:25:42,160
ふざけんなよ。

585
00:25:42,160 --> 00:25:43,000
私はこれをどのように修正すればよい？

586
00:25:43,000 --> 00:25:45,679

587
00:25:45,679 --> 00:25:47,220
それは右、前と同じ問題です？

588
00:25:47,220 --> 00:25:52,510
だから私はchmod-- oops--をやらせる
するlist.htmlの+ rをchmodし。

589
00:25:52,510 --> 00:25:54,610

590
00:25:54,610 --> 00:25:59,610
そして今、私は自分のブラウザに戻ってしまったら
とリロードをクリックし、そこにそれがある。

591
00:25:59,610 --> 00:26:02,360
だから、あなたが作りたいと思ってしまった場合
箇条書きリスト、あなたはそれを行うことができます。

592
00:26:02,360 --> 00:26:06,210
あなたはスーパー空想であることとしたい場合は
順序付きリストではなく、順不同リスト、

593
00:26:06,210 --> 00:26:10,170
、OLにそれらを変更するページをリロードし、
今ブラウザがあなたのためにそれに番号をします。

594
00:26:10,170 --> 00:26:11,241
>> 私たちは他に何ができますか？

595
00:26:11,241 --> 00:26:13,990
さて、others--のカップルであれば
あなたがtext--の長いパラグラフを持っている

596
00:26:13,990 --> 00:26:15,698
例えば、いくつかの
this--のようなラテン語のテキスト

597
00:26:15,698 --> 00:26:20,730
あなたが別々のパラグラフでそれをしたい、
オープンP、段落タグの近くのp。

598
00:26:20,730 --> 00:26:22,010
そして何度も何度もそれを行う。

599
00:26:22,010 --> 00:26:26,600
そして、私は今、このファイルを開く場合には、
paragraphs.html、よく、この

600
00:26:26,600 --> 00:26:27,570
迷惑になっている。

601
00:26:27,570 --> 00:26:34,320
だから今ちょうど戻って私に行こう
プロンプト、+ R rのスターます。chmod .html--

602
00:26:34,320 --> 00:26:36,099
いわばちょっといいワイルドカード。

603
00:26:36,099 --> 00:26:37,890
それはすべてを修正する必要があります
私にとっては、これらの問題。

604
00:26:37,890 --> 00:26:38,990
それではリロードしてみましょう。

605
00:26:38,990 --> 00:26:40,500
3段落があります。

606
00:26:40,500 --> 00:26:42,930
>> そして今、先に進みましょう
もう一方を開く。

607
00:26:42,930 --> 00:26:44,310
どのように表はどうですか？

608
00:26:44,310 --> 00:26:46,440
あなたは、テーブルルックスを気づくでしょう
少し複雑。

609
00:26:46,440 --> 00:26:49,110
しかし、それは同じだidea--
開始タグ、開始タグ、

610
00:26:49,110 --> 00:26:51,360
オープン、オープン、オープン、クローズタグ、開始タグ。

611
00:26:51,360 --> 00:26:54,410
これらは放置してしまった
その境界線は明らかである表、

612
00:26:54,410 --> 00:26:58,500
厚1--どんなことになるだろう
そのmeans--テーブル行、テーブル

613
00:26:58,500 --> 00:27:00,320
細胞を意味するデータ。

614
00:27:00,320 --> 00:27:03,840
そして、私は私のブラウザに戻った場合
こことtable.htmlに行く、

615
00:27:03,840 --> 00:27:05,840
あなたが何かを見ることができます
このような、恐ろしい。

616
00:27:05,840 --> 00:27:07,840
しかし、我々はポイントに買ってあげる
どこに私たちは実際にできます

617
00:27:07,840 --> 00:27:09,260
それよりも物事がきれいにする。

618
00:27:09,260 --> 00:27:10,530
>> だから私は、今のところ定めましょう。

619
00:27:10,530 --> 00:27:11,870
複数のタグの束があります。

620
00:27:11,870 --> 00:27:15,225
そしてHTMLは拾うのは素晴らしいです
率直に言って、なぜなら、あなたがする必要があるすべて

621
00:27:15,225 --> 00:27:17,600
既存のWebページを見ている
これであなたは慣れている。

622
00:27:17,600 --> 00:27:20,340
そして、あなたはああ、それはどのようだが、似ている
彼らは、審美的にこれをした。

623
00:27:20,340 --> 00:27:23,159
>> それとも、すべてのオンラインを調べることができます
HTMLはどのように機能するかについての資源、

624
00:27:23,159 --> 00:27:25,700
そしてあなたはそこだということがわかります
他のタグの全体の語彙。

625
00:27:25,700 --> 00:27:30,110
しかし、シンプルなメンタルモデルを持つ
一人で開くことほぼすべてのタグ

626
00:27:30,110 --> 00:27:33,620
実際に、それを閉じなければならない
自分を教えるために十分ではない

627
00:27:33,620 --> 00:27:36,950
HTMLは、後に理解
タグのこれらの基本的な考え方

628
00:27:36,950 --> 00:27:40,520
属性と整形
我々は話をしたので、

629
00:27:40,520 --> 00:27:44,697
私たちが開くかもしれない何を閉じる
我々はブラウザを混同しないようにします。

630
00:27:44,697 --> 00:27:46,780
それでは、今、このてみましょう
もっと面白いレベル

631
00:27:46,780 --> 00:27:48,100
実際に行くことによって。

632
00:27:48,100 --> 00:27:51,095
との私のMacに行こう
ここで、google.comへ。

633
00:27:51,095 --> 00:27:52,280

634
00:27:52,280 --> 00:27:54,020
そして今notice--はこのやろう。

635
00:27:54,020 --> 00:27:57,280
私はに行くゴングだ
[設定]、[検索の設定。

636
00:27:57,280 --> 00:28:01,070
私は、この厄介な瞬間をオフにする
結果の事どこにすぐに

637
00:28:01,070 --> 00:28:02,450
あなたのタイピングへの対応を開始します。

638
00:28:02,450 --> 00:28:05,300
それではので、この古い学校をやってみましょう
私たちは実際に何が起こっているかを参照してください。

639
00:28:05,300 --> 00:28:08,260
>> だから、私は内容を保存するつもりです
ここではGoogleの設定を行います。

640
00:28:08,260 --> 00:28:11,160
そして今、私はするつもりですnotice--
猫のようなものを検索します。

641
00:28:11,160 --> 00:28:14,500
そしてそれはまだオートをやって
ここで完全なが、物事に基づく

642
00:28:14,500 --> 00:28:15,970
人々が過去に入力した。

643
00:28:15,970 --> 00:28:17,490
しかし起こる何が起こっているかに気づく。

644
00:28:17,490 --> 00:28:20,272
>> 現時点ではURL内
これは、ちょうどgoogle.comである。

645
00:28:20,272 --> 00:28:22,650
技術的に、それはスラッシュだ。

646
00:28:22,650 --> 00:28:25,910
Googleは単に文字を保存するだ
そして、私たちのことを示していない。

647
00:28:25,910 --> 00:28:30,400
彼らはただ、私たちにはhttpsを見せている
私たちがしていることを、スーパー安心すべき

648
00:28:30,400 --> 00:28:32,850
セキュアなまたは暗号化されたページで。

649
00:28:32,850 --> 00:28:35,690
>> だから私は先に行くと猫を探してみましょう。

650
00:28:35,690 --> 00:28:37,670
さて、これは本当に持って
迅速圧倒的。

651
00:28:37,670 --> 00:28:39,470
このURLの長さを見てください。

652
00:28:39,470 --> 00:28:43,070
しかし、それはこのようなもののほとんどが判明
URLに実際にはかなり無駄です。

653
00:28:43,070 --> 00:28:45,320
私は削除を開始するつもりだ
私は理解していないもの。

654
00:28:45,320 --> 00:28:46,560

655
00:28:46,560 --> 00:28:47,360
私は猫を参照してください。

656
00:28:47,360 --> 00:28:48,470
私は猫を理解する。

657
00:28:48,470 --> 00:28:50,380
猫は再びそこにある理由を私は知らない。

658
00:28:50,380 --> 00:28:52,620
私は本当に知らない
このナンセンスは何ですか。

659
00:28:52,620 --> 00:28:56,030
だから、僕は続けるつもりです
ハイライトとかを削除

660
00:28:56,030 --> 00:28:59,905
私は理解していないこと、
ちょうどこのにURLを蒸留する。

661
00:28:59,905 --> 00:29:00,920

662
00:29:00,920 --> 00:29:02,270
>> 今、私は再び入力しましょう​​。

663
00:29:02,270 --> 00:29:03,814
Googleはまだ動作しますように見えます。

664
00:29:03,814 --> 00:29:06,980
だから、いくつかの理由で、彼らは追加しています
デフォルトでは、それらのURLのへの多くのもの。

665
00:29:06,980 --> 00:29:09,000
しかし、それは厳密に必須ではありません。

666
00:29:09,000 --> 00:29:10,340
だから、これについての素晴らしい何ですか？

667
00:29:10,340 --> 00:29:13,630
さて、私が先に行く聞かせて
Chromeのインスペクタを開く。

668
00:29:13,630 --> 00:29:15,960
それのための小さなマウスのショートカットがあります。

669
00:29:15,960 --> 00:29:17,360
>> [ネットワーク]タブに移動します。

670
00:29:17,360 --> 00:29:19,340
そして今、私はリロードせ
このページもう一度。

671
00:29:19,340 --> 00:29:20,280
と私はShiftキーを押しています。

672
00:29:20,280 --> 00:29:22,520
余談ですが、ブラウザなど
キャッシュまたは保存する傾向がある

673
00:29:22,520 --> 00:29:24,697
ただ、効率の日本酒のための情報。

674
00:29:24,697 --> 00:29:27,280
しかし通常は、Shiftキーを押しながら
すべてを強制的にリロード

675
00:29:27,280 --> 00:29:28,994
最初からやり直すこと。

676
00:29:28,994 --> 00:29:30,410
そして、それは私がここで何をしたいのです。

677
00:29:30,410 --> 00:29:33,550
>> これらの全てに気付く
ちょうど現れた行。

678
00:29:33,550 --> 00:29:37,920
これは、任意のウェブ与えられたことが判明
ページ、1つのファイルがあるかもしれません

679
00:29:37,920 --> 00:29:43,500
hello.html--またはそこinvolved--
この場合のように、52であろう。

680
00:29:43,500 --> 00:29:45,820
私はgoogle.comにアクセスすると、
どうやら、私のブラウザ

681
00:29:45,820 --> 00:29:49,650
52の別々のHTTPリクエストをキックオフ。

682
00:29:49,650 --> 00:29:50,520
これはなぜですか？

683
00:29:50,520 --> 00:29:53,380
>> さて、中身を見て
このWebページアップトップの。

684
00:29:53,380 --> 00:29:55,620
テキストだけではありません、
しかし、実際のイメージがあります

685
00:29:55,620 --> 00:29:57,130
右にオーバー猫。

686
00:29:57,130 --> 00:29:59,110
カラフルなロゴが左上にここまであります。

687
00:29:59,110 --> 00:30:01,750
これらのアイコンのすべてがあります
マイクなど。

688
00:30:01,750 --> 00:30:05,130
作品の多くは、建物は、あります
ブロック、スクラッチ片、あなたがする場合は、

689
00:30:05,130 --> 00:30:06,250
このWebページに移動します。

690
00:30:06,250 --> 00:30:10,310
ブラウザが時に何をしているか
、非常に最初のファイルを取得している

691
00:30:10,310 --> 00:30:16,180
この行は、それが本質的に、ここにある
HTMLのトップを反復

692
00:30:16,180 --> 00:30:19,880
底に、探して、左から右へ
イメージタグやその他のタグのようなもの

693
00:30:19,880 --> 00:30:23,160
他のファイルに言及していること、および
それがそれらを見るとき、行くと、それらをフェッチ

694
00:30:23,160 --> 00:30:26,050
HTTP経由で、生存全体
封筒のメタファー、

695
00:30:26,050 --> 00:30:29,670
その後に表示します
Webページ内の適切な場所。

696
00:30:29,670 --> 00:30:33,370
>> 私が焦点を当てる場合は、しかし、ここで気づく
最初のスロー、検索猫、

697
00:30:33,370 --> 00:30:37,090
確かにそれはHTTP 1.1を使っている、ことがわかります。

698
00:30:37,090 --> 00:30:41,690
残念ながら、グーグル
バージョン39で、今クローム

699
00:30:41,690 --> 00:30:45,110
種類のものをレベルを下げるとされている
私たちに実際のヘッダを表示しない。

700
00:30:45,110 --> 00:30:49,680
しかし、どのような実際に送信されたことは要求され
しかし/検索、スラッシュではない？Q =猫。

701
00:30:49,680 --> 00:30:52,830

702
00:30:52,830 --> 00:30:54,340
>> さて、なぜそれが重要なのですか？

703
00:30:54,340 --> 00:30:57,110
まあ、私は推測するつもりです
このことから、もし、あなたのGoogle

704
00:30:57,110 --> 00:31:01,520
なぜ、このフォームのクエリをサポート
私は自分の検索を実装していない

705
00:31:01,520 --> 00:31:06,420
CS50用のエンジンが、ちょうどフロント
終わり、ちょうどグラフィカル·ユーザー·インターフェース。

706
00:31:06,420 --> 00:31:09,610
そして、我々は、バックエンドを外部委託します、
実際の検索は、Googleに結果。

707
00:31:09,610 --> 00:31:10,510
>> だから私はこれをどのように行うことができますか？

708
00:31:10,510 --> 00:31:13,820
さて、私はこっちのgeditに行きましょう。

709
00:31:13,820 --> 00:31:19,180
そして、私が先に行くと、開いてみましょう
アップ、の言う新しいファイルをしてみましょう。

710
00:31:19,180 --> 00:31:22,280
そして、私はこれを保存するつもりです
一時的に検索0.htmlなど。

711
00:31:22,280 --> 00:31:25,111

712
00:31:25,111 --> 00:31:27,860
その後、最終的に、我々は速いだろう
フォワード私は1に予め用意した。

713
00:31:27,860 --> 00:31:30,190
>> そして、私はするつもりだ
迅速にドキュメントの種類をかき立てる

714
00:31:30,190 --> 00:31:33,840
htmlのオープンブラケットHTML
近いブラケットのhtml。

715
00:31:33,840 --> 00:31:38,390
それから私は頭をするつもりです
近い頭部オープンタイトルCS50

716
00:31:38,390 --> 00:31:40,150
検索の代わりに、Google検索。

717
00:31:40,150 --> 00:31:43,480
ダウンここに私が持っているつもりです
ボディ、ダウンここに近いボディ。

718
00:31:43,480 --> 00:31:45,835
そして今、私はCS50検索を必要としています。

719
00:31:45,835 --> 00:31:47,710
そして実際に、してみましょう
インクリメンタルにこれを構築する。

720
00:31:47,710 --> 00:31:51,043
私が先に行くと、これを閉じてするつもりです
実際に私の公開ディレクトリに配置します。

721
00:31:51,043 --> 00:31:52,730
だから、私にちょうど一瞬を与える。

722
00:31:52,730 --> 00:31:55,390
私はするつもりだ検索0.html--
一時search.htmlのそれを呼び出す。

723
00:31:55,390 --> 00:31:56,600

724
00:31:56,600 --> 00:31:59,750
私はそれを+ Rがsearch.htmlのをchmodするつもりです。

725
00:31:59,750 --> 00:32:01,072

726
00:32:01,072 --> 00:32:02,280
そして今、私はそれを開くつもりです。

727
00:32:02,280 --> 00:32:03,224

728
00:32:03,224 --> 00:32:04,390
すべての権利、それは高速だったので。

729
00:32:04,390 --> 00:32:06,800
しかし、目標は、単にだった
ポイントに私たちを取得する

730
00:32:06,800 --> 00:32:09,630
このテキストを持っていることの
ファイルはsearch.htmlのと呼ばれる。

731
00:32:09,630 --> 00:32:10,940

732
00:32:10,940 --> 00:32:12,790
まだ見てそんなにはない。

733
00:32:12,790 --> 00:32:16,970
確かに、私は私のブラウザに行けば、と
それはそれがすべてだ、search.htmlのに行く。

734
00:32:16,970 --> 00:32:17,720
しかし、あなたは何を知っていますか？

735
00:32:17,720 --> 00:32:19,000
私は少し手の込んだことができます。

736
00:32:19,000 --> 00:32:22,710
私はそこだと本で読ん
見出しタグは、H1と呼ばれる。

737
00:32:22,710 --> 00:32:26,100
そして、私は先に行くつもりだと
そのオープンh1及びクローズH1を使用しています。

738
00:32:26,100 --> 00:32:27,220
ページをリロードします。

739
00:32:27,220 --> 00:32:29,600
今では、大きく、大胆だ
すべてのこと面白くない、

740
00:32:29,600 --> 00:32:32,399
しかし、少なくともそれと構造
もっと面白い。

741
00:32:32,399 --> 00:32:33,940
しかし、今私は別のタグをご紹介しましょう​​。

742
00:32:33,940 --> 00:32:36,500
これは、formタグがあると判明した。

743
00:32:36,500 --> 00:32:38,400
そして私はそのタグを閉じてみましょう。

744
00:32:38,400 --> 00:32:40,830
そして、それはそこのが判明
inputタグその

745
00:32:40,830 --> 00:32:44,600
、タイプという属性を持っている
フィールドのデータ型であり、

746
00:32:44,600 --> 00:32:45,200
可能ならば。

747
00:32:45,200 --> 00:32:47,050
とtext型であることが起こっている。

748
00:32:47,050 --> 00:32:52,200
その値が起こっている
CS50検索することができます。

749
00:32:52,200 --> 00:32:53,850
終了タグ。

750
00:32:53,850 --> 00:32:57,100
との概念はないように起こっている
開いて別々のタグを閉じる。

751
00:32:57,100 --> 00:33:00,300
>> 私はこちらに戻りましょうと
何が起こっているかを参照してください、リロード。

752
00:33:00,300 --> 00:33:01,380
興味深いの取得。

753
00:33:01,380 --> 00:33:02,950
それはテキストフ​​ィールドのように見えます。

754
00:33:02,950 --> 00:33:04,080

755
00:33:04,080 --> 00:33:06,999
そして実際に、私が望んでいない
まだそこに価値を置くために。

756
00:33:06,999 --> 00:33:10,040
私はここに戻って、実際に取得してみましょう
それをシンプルに保つためには、この値を取り除く。

757
00:33:10,040 --> 00:33:12,939
代わりに私が何を望むかの値の
この事を与えるために名前があった。

758
00:33:12,939 --> 00:33:15,230
そして私は、それが何であるかを知らない
ので、私は戻ってそれに来る。

759
00:33:15,230 --> 00:33:18,270
>> しかし、その下に、私が欲しい
入力タイプを行うに=提出する。

760
00:33:18,270 --> 00:33:19,840

761
00:33:19,840 --> 00:33:22,120
この値はCS50検索になります。

762
00:33:22,120 --> 00:33:24,850
なぜ私と我々が表示されます
これに値を移動しました。

763
00:33:24,850 --> 00:33:28,900
私がリロードするとき、私は今持っているように見える
私自身の探索の始まり

764
00:33:28,900 --> 00:33:30,820
エンジン、スーパー恐ろしい、
率直に言っても、それはだ

765
00:33:30,820 --> 00:33:34,260
何から遠くないスロー
Googleのデフォルトページは次のようになります。

766
00:33:34,260 --> 00:33:37,950
>> 私は今ここに行くなら、私は入力することができ
猫とうまくいけば検索]をクリックします。

767
00:33:37,950 --> 00:33:40,380
しかし、私はかなり、まだいないよ
私が実装していないので、

768
00:33:40,380 --> 00:33:41,045
明らかに、データベース。

769
00:33:41,045 --> 00:33:42,940
私がクロールされていない
検索結果のためのウェブ。

770
00:33:42,940 --> 00:33:44,840
だから私はGoogleにそれを委託する必要があります。

771
00:33:44,840 --> 00:33:46,290
だから私はこれをどのように行うのですか？

772
00:33:46,290 --> 00:33:49,170
>> 私はすべてのさて、最初
追加および行動する必要があります

773
00:33:49,170 --> 00:33:58,460
私のformタグとは、属性
http://www.google.com/searchある。

774
00:33:58,460 --> 00:34:01,180
そして、私は知っているだけ持っていることから
密接に見て、推論

775
00:34:01,180 --> 00:34:02,505
自分のURLで。

776
00:34:02,505 --> 00:34:03,380
そして今、推測を取る。

777
00:34:03,380 --> 00:34:09,090
何このテキストフ​​ィールドは、おそらくべき
私たちが来た場所に基づいて、呼び出すことが

778
00:34:09,090 --> 00:34:09,754
前から？

779
00:34:09,754 --> 00:34:11,896

780
00:34:11,896 --> 00:34:13,290
>> 読者：？Q。

781
00:34:13,290 --> 00:34:14,370
>> DAVID Jマラン：？Q。

782
00:34:14,370 --> 00:34:17,800
そして、我々は実際に質問をする必要はありません
それは結局のところ、しかしqは確かにそれでマークし、

783
00:34:17,800 --> 00:34:20,489
クエリのQ恐らくによる
デフォルトでは、それはだという理由だけで

784
00:34:20,489 --> 00:34:23,060
何ラリーとサーゲイ
年前に思い付いた。

785
00:34:23,060 --> 00:34:24,739
だから今私は、このページをリロードしてみましょう。

786
00:34:24,739 --> 00:34:26,409
それはすべて、異なる見ていません。

787
00:34:26,409 --> 00:34:28,120
しかし、今何が起こるかを見る。

788
00:34:28,120 --> 00:34:32,360
>> 私は猫とクリックで入力した場合
CS50検索と行かせ、

789
00:34:32,360 --> 00:34:35,770
私は泡立て取得気づく
離れて実際のGoogleに。

790
00:34:35,770 --> 00:34:38,150
さて、Googleは少しされている
彼らがしているという点で、迷惑な

791
00:34:38,150 --> 00:34:41,877
追加のパラメータを追加、
URLへ、可能ならば。

792
00:34:41,877 --> 00:34:43,960
それはすべて起こっている
自動的にGoogleの側に。

793
00:34:43,960 --> 00:34:48,730
>> 重要な部分は、私が見えるということです
ここにこの要求を生成しているため。

794
00:34:48,730 --> 00:34:50,179
そして実際、それは何が起こるかだ。

795
00:34:50,179 --> 00:34:53,040
あなたは、HTMLを持っている場合、その
これは、次のようになります

796
00:34:53,040 --> 00:34:57,620
ウェブ開発者の表記法の一種である
と言ってために、先に行くと、フォームを作成

797
00:34:57,620 --> 00:34:59,990
それが提出さだときに、
それは次のURLを参照してくださいになるだろう。

798
00:34:59,990 --> 00:35:03,430
そしてURLが提供しているとき
Qのようなものの値は、

799
00:35:03,430 --> 00:35:05,440
ちょうどこのURLに行っていない。

800
00:35:05,440 --> 00:35:08,210
実際には、質問に行く
マークした後、Q =猫。

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
パラメータを追加し、
そのようなHTTPパラメータ。

803
00:35:13,060 --> 00:35:15,590
>> そして、ちょうど、スーパー正確には
何が推測されていますhere--

804
00:35:15,590 --> 00:35:18,130
しかし、私はもっとexplicit--されるだろう
私が使用する方法

805
00:35:18,130 --> 00:35:22,270
代わりのようなもので、ある取得
私たちは最終的に表示されますポスト、。

806
00:35:22,270 --> 00:35:27,710
だから、要するに、単に理解することによって
HTMLといくつかの非常に単純なタグを使用して、

807
00:35:27,710 --> 00:35:30,610
我々は今作成し始めることができます
当社独自のフロントエンドユーザー

808
00:35:30,610 --> 00:35:32,850
検索とのインタフェース
その背後にあるエンジン。

809
00:35:32,850 --> 00:35:34,800
>> しかし、これは、もちろん、かなり恐ろしいある。

810
00:35:34,800 --> 00:35:37,259
だから私が実際に開いてみましょう
わずかに良いバージョン。

811
00:35:37,259 --> 00:35:39,800
これは私が中で調製したものである
いくつかのコメントを持って前進。

812
00:35:39,800 --> 00:35:41,900
しかし、あなたはその私が表示されます
かなりそれを再現し。

813
00:35:41,900 --> 00:35:44,150
だから、これはすでにオンラインで入手可能です。

814
00:35:44,150 --> 00:35:48,050
そして、私は先制に起こった
ちょうどそれをシンプルに保つためにhttpsに行く。

815
00:35:48,050 --> 00:35:50,610
>> そして今のアップ開いてみましょう
これの次の反復。

816
00:35:50,610 --> 00:35:52,510
バージョン1の代わりに0である。

817
00:35:52,510 --> 00:35:55,315
何として少しあなたに飛び出す
この例では、異なる？

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> 読者：[聞こえない]。

820
00:36:00,440 --> 00:36:03,020
>> うん、このテキスト整列センターがあります。

821
00:36:03,020 --> 00:36:04,590
これはここに少し奇妙です。

822
00:36:04,590 --> 00:36:06,150
しかし、これは確かに新しく追加されました。

823
00:36:06,150 --> 00:36:07,800
そして多分起こる何が起こっているかと思います。

824
00:36:07,800 --> 00:36:11,730
私は今、私のブラウザに行けば
と検索-1.htmlを訪れ、

825
00:36:11,730 --> 00:36:13,090
それはほとんど同じことだ。

826
00:36:13,090 --> 00:36:15,705
しかし、それは近い段階だ
もう少しきれいであること。

827
00:36:15,705 --> 00:36:19,150
それはまだ醜いですが、その中できれい
少なくともすべてが今中心にいます。

828
00:36:19,150 --> 00:36:23,470
>> だから、私は何を使用していることが判明
別の言語が完全に呼び出された

829
00:36:23,470 --> 00:36:25,680
CSS、カスケーディングスタイルシート。

830
00:36:25,680 --> 00:36:28,310
そしてCSSは、率直に言って、親切である
の、私の個人的意見では、

831
00:36:28,310 --> 00:36:29,775
atrociously設計された言語。

832
00:36:29,775 --> 00:36:33,110
これは覚えておくことは非常に迷惑です
すべての様々な詳細。

833
00:36:33,110 --> 00:36:38,479
しかし、それはstylizes何ですか
全体ワールドワイドウェブ、今日。

834
00:36:38,479 --> 00:36:39,270
私は誰かを怒ら。

835
00:36:39,270 --> 00:36:39,769
わかりました。

836
00:36:39,769 --> 00:36:43,180
それでは、ここに戻って見てみましょう
どのように我々は実際にこれを使っている。

837
00:36:43,180 --> 00:36:45,940
そして、それは少なくともそれはだ、判明
実際にはかなり単純な言語。

838
00:36:45,940 --> 00:36:49,470
それはちょうど、キーと値のペア、プロパティだ
と値、プロパティと値。

839
00:36:49,470 --> 00:36:52,080
実際、ここに一つです
そのようなプロパティと値。

840
00:36:52,080 --> 00:36:55,890
>> 単にスタイルを使用して、
私のbodyタグの属性

841
00:36:55,890 --> 00:37:00,360
それにの値を与える
単語コロンと別の単語、

842
00:37:00,360 --> 00:37:03,730
またはプロパティと値、
私は美学に影響を与えることができる

843
00:37:03,730 --> 00:37:06,210
ウェブページのではなく
必ずしもまだ構造、

844
00:37:06,210 --> 00:37:07,550
それの美学。

845
00:37:07,550 --> 00:37:10,960
そして、ちょうど周りにグーグルによって、私は実現する
そのCSS、カスケーディングスタイルシート、

846
00:37:10,960 --> 00:37:14,170
というプロパティをサポートしています
その値は缶のtext-align、

847
00:37:14,170 --> 00:37:16,980
例えば、右、または中央に残される。

848
00:37:16,980 --> 00:37:19,990
>> だから今、私はリロード時
このページは、私が何を手に入れた

849
00:37:19,990 --> 00:37:22,730
中心のページだった、
それでもかなり醜い。

850
00:37:22,730 --> 00:37:25,770
それでは先に行くと、開いてみましょう
検索のバージョン2まで。

851
00:37:25,770 --> 00:37:28,570
そして今、私はもう少しやった気づく。

852
00:37:28,570 --> 00:37:33,760
頭部の内側に、ここでそれをアップに注目
タグは、タイトル以上が存在し得る。

853
00:37:33,760 --> 00:37:35,400
実際には、スタイルのタグがあります。

854
00:37:35,400 --> 00:37:38,630
それだけで取得する場所と、これはある
少し厄介な、時にはCSSを見て。

855
00:37:38,630 --> 00:37:41,971
>> 私は何かを持っているように見えることに注意してください
それは、構造的に非常に異なって見えます。

856
00:37:41,971 --> 00:37:44,095
しかし、ここでの名前です。
タグは、私が様式化したい。

857
00:37:44,095 --> 00:37:47,570
ここに私たちの古くからの友人は、中です
中括弧と閉じ中括弧。

858
00:37:47,570 --> 00:37:50,290
その後ここにということです
プロパティとその値。

859
00:37:50,290 --> 00:37:56,300
>> 私はこのファイルをロードすると、search2.html、
最終結果は同じである。

860
00:37:56,300 --> 00:37:59,300
しかし、それはよりよい設計に向けた一歩だ。

861
00:37:59,300 --> 00:38:04,560
このCSSをファクタリングすることで、私がしました
私はHTMLでそれを混ぜ合わせていない。

862
00:38:04,560 --> 00:38:07,560
我々が表示されますようにそして実際、私ができた
これらのプロパティと値を再利用します。

863
00:38:07,560 --> 00:38:10,420
私はの束を作りたかった場合
私のウェブページの一部が中心

864
00:38:10,420 --> 00:38:13,630
私はスタイル=のtext-alignを入力する必要はありません
すべての場所の上の中心。

865
00:38:13,630 --> 00:38:16,580
私は1つの場所に置くことができます
多分、一番上にアップするのが好きです。

866
00:38:16,580 --> 00:38:18,210
>> しかし、たとえこれが最適な設計ではありません。

867
00:38:18,210 --> 00:38:21,720
実際には、物事の一つは、あなたが学びます
あなたはより多くの時間を費やすように

868
00:38:21,720 --> 00:38:25,730
Webプログラミングは、より多くのあなたができることです
物事や因子物事をモジュール化

869
00:38:25,730 --> 00:38:30,610
.hファイルと同じように、私たちに係数のものを出す
私たち因子物事を出すhelpers.c好き

870
00:38:30,610 --> 00:38:31,880
少数のpset前。

871
00:38:31,880 --> 00:38:34,200
同様に、私たちかもしれない
これを達成したい。

872
00:38:34,200 --> 00:38:37,920
>> だからバージョンで気づく
私がしたsearch.htmlのの3

873
00:38:37,920 --> 00:38:40,610
頭のクリーンアップ
ページとちょうど置く

874
00:38:40,610 --> 00:38:43,320
この中で、リンクタグ、これ
名前に反して、

875
00:38:43,320 --> 00:38:44,700
あなたにハイパーリンクを与えるものではありません。

876
00:38:44,700 --> 00:38:49,150
これは、経由で別のファイルにリンクする
その値は、この場合のhref、

877
00:38:49,150 --> 00:38:51,586
検索3.cssです

878
00:38:51,586 --> 00:38:52,960
だから私は、我々はすぐに実現するつもりだ。

879
00:38:52,960 --> 00:38:54,600
しかし、私がやっているすべての一種である
周りのものを移動する。

880
00:38:54,600 --> 00:38:55,760
検索3.css私は開いてみましょう。

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
それは本当に、何もありません。

883
00:38:58,530 --> 00:39:02,270
私はちょうど新しいにそれをコピー＆ペースト
私たちはものを因数分解のと同じようにファイル、

884
00:39:02,270 --> 00:39:03,509
前他のファイルに変換する。

885
00:39:03,509 --> 00:39:05,300
そしてresult--
完全underwhelming--

886
00:39:05,300 --> 00:39:06,730
全く同じになるだろう。

887
00:39:06,730 --> 00:39:10,490
しかし、我々はtoward--移動しているいいえ、そうではありません。

888
00:39:10,490 --> 00:39:11,930
ああ、私はなぜ知っている。

889
00:39:11,930 --> 00:39:13,790
>> だから、バグのようです。

890
00:39:13,790 --> 00:39:15,010
そして、それは、ある意味である。

891
00:39:15,010 --> 00:39:17,730
しかし、私は私の[ネットワーク]タブを開いてみましょう。

892
00:39:17,730 --> 00:39:19,660
私はページをリロードしてみましょう。

893
00:39:19,660 --> 00:39:23,315
ああ、なぜCSSが適用されていない？

894
00:39:23,315 --> 00:39:26,920
さて、CSSファイルは、同様に有している
いわば、世界の読み取り可能に。

895
00:39:26,920 --> 00:39:28,440
そして、それはあまりにも、現在禁止されています。

896
00:39:28,440 --> 00:39:33,760
だから私は、chmodのaの+ Rをやらせる
スターのドットCSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
私たちは、ドットCSSがちょうどですね
CSSファイルのファイル拡張子。

898
00:39:37,067 --> 00:39:38,900
今、私はに戻ってみましょう
私のブラウザとリロード。

899
00:39:38,900 --> 00:39:40,910
[OK]を、少し良く。

900
00:39:40,910 --> 00:39:42,282
>> 今、私は最後のことをやらせる。

901
00:39:42,282 --> 00:39:42,990
検索-4.html中。

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
私はちょうど思ったバージョンを持っている
道よりもかかわらず、道涼しかった

904
00:39:48,220 --> 00:39:48,980
複雑。

905
00:39:48,980 --> 00:39:50,690
それでは、最初の結果を見てみましょう。

906
00:39:50,690 --> 00:39:52,290
私たちに多くの部屋を与えるために、これを閉じます。

907
00:39:52,290 --> 00:39:54,275
入力し、検索-4をするために、これを変更してください。

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> そして今、物事の束が壊れている。

910
00:39:57,200 --> 00:39:59,910
私は戻って行くつもりです
ここに私のディレクトリにコピーします。

911
00:39:59,910 --> 00:40:04,190
そして今、私はちょうどするつもりです
file--の上に+ rのは、chmod

912
00:40:04,190 --> 00:40:07,450
私はそれが呼び出さexists--知っているので、
イメージですlogo.gifを、。

913
00:40:07,450 --> 00:40:08,590
そして今、リロード。

914
00:40:08,590 --> 00:40:11,040
そして今、私はそうwow--
率直に言って、非常に近い、

915
00:40:11,040 --> 00:40:15,860
グーグルの1999バージョンを好きに、そして
率直に言って、グーグルの2014バージョン、

916
00:40:15,860 --> 00:40:16,360
右？

917
00:40:16,360 --> 00:40:21,920
>> だから、今、彼らのウェブサイトに起こっている
最終的に、私は猫を検索する場合。

918
00:40:21,920 --> 00:40:23,900
そして実際、それはある。

919
00:40:23,900 --> 00:40:26,410
しかし、私は違った何をした
このバージョン4で？

920
00:40:26,410 --> 00:40:28,020
だから我々はここでそれにあまりこだわることはありません。

921
00:40:28,020 --> 00:40:30,100
あなたは問題でこれが表示されます
最終的には7に設定してください。

922
00:40:30,100 --> 00:40:31,350
しかし、私はいくつかのことをやった気づく。

923
00:40:31,350 --> 00:40:33,690
>> 私はdiv要素を導入しました
部門であるタグ、

924
00:40:33,690 --> 00:40:35,450
段落タグとその精神においては似た。

925
00:40:35,450 --> 00:40:38,220
しかし部門はここにあるだけで、似ています
長方形の不可視領域

926
00:40:38,220 --> 00:40:39,150
画面の。

927
00:40:39,150 --> 00:40:41,680
さんはそれをユニークに挙げてみましょう
ちょうど識別子、フッター、

928
00:40:41,680 --> 00:40:44,700
我々は約話すことができるように、
それ他の場所で私たちのHTML内。

929
00:40:44,700 --> 00:40:47,952
こちらのページの別のdivがある
そのIDは、コンテンツになるだろう。

930
00:40:47,952 --> 00:40:49,160
それは、ページの内容です。

931
00:40:49,160 --> 00:40:51,090
とここまでページのヘッダーである。

932
00:40:51,090 --> 00:40:54,960
>> 言い換えれば、私はしました
基本的にHTMLで精神的に午前

933
00:40:54,960 --> 00:40:57,700
このWebページなどを閲覧する
3成分ヘッダ

934
00:40:57,700 --> 00:41:01,200
この目に見えない長方形で、ここまで、
その後、途中でコンテンツ、および

935
00:41:01,200 --> 00:41:04,800
ダウン下のフッター、偶数
けれども私たちはそれらのものが表示されません。

936
00:41:04,800 --> 00:41:09,940
私は私の頭の中にしたいので
こちらのページ、または.cssのファイルで、

937
00:41:09,940 --> 00:41:11,460
私はこの構文を使用することができます。

938
00:41:11,460 --> 00:41:13,070
>> ヘッダーはタグではありません。

939
00:41:13,070 --> 00:41:17,060
それはターンだから、IDだ
#headerを実行していることが、

940
00:41:17,060 --> 00:41:20,840
私は今1つ以上​​を適用することができます
ヘッダーにプロパティ。

941
00:41:20,840 --> 00:41:24,130
私は、同じ内容を行うことができ、
ここにコンテンツのために同じ。

942
00:41:24,130 --> 00:41:27,230
>> 例えば、フッターに、予告そう
私が追加しているこれらの特性のすべて。

943
00:41:27,230 --> 00:41:30,660
そして、私は彼らが読書によって単に存在を知って
CSSのマニュアルのアップ。

944
00:41:30,660 --> 00:41:33,450
フォントサイズは​​smaller--になるだろう
ので、いくつかの相対的なフォントサイズ。

945
00:41:33,450 --> 00:41:34,741
重量が太字になるだろう。

946
00:41:34,741 --> 00:41:37,340
どのように多くのピクセルをMargin--
it--周り20ピクセルです。

947
00:41:37,340 --> 00:41:38,590
そして、それは中心になるだろう。

948
00:41:38,590 --> 00:41:40,256
>> しかし、今、ページは次のようになります。

949
00:41:40,256 --> 00:41:42,840
私はに満足していないよ場合
右が私のコピー、

950
00:41:42,840 --> 00:41:46,560
私は色の赤のような何かを行うことができます。

951
00:41:46,560 --> 00:41:50,570
その後、私はこれを保存することができ、リロード、
そして今私はフッターを様式化しました。

952
00:41:50,570 --> 00:41:54,130
だから、これは単に電力を示唆されている
あなたは、Webページで何ができるかの

953
00:41:54,130 --> 00:41:55,510
物事を周りに変更します。

954
00:41:55,510 --> 00:41:59,080
>> そして、これよりもさらにクーラー、あなたがしたい場合
実際のウェブサイトの周り突くために、

955
00:41:59,080 --> 00:42:00,810
あなたは永久にそれらを変更することはできません。

956
00:42:00,810 --> 00:42:03,640
しかし、私は開いている場合
再びChromeのインスペクタ

957
00:42:03,640 --> 00:42:07,610
と私は、左手側にはない行く
ここでは、FacebookのHTMLを示しており、

958
00:42:07,610 --> 00:42:11,380
しかし、右側に示しています
右側のCSSのすべて、

959
00:42:11,380 --> 00:42:13,789
あなたはどちらかとすることができ
その場で状況を変える。

960
00:42:13,789 --> 00:42:15,080
だから私は先に行くとこれをやらせる。

961
00:42:15,080 --> 00:42:18,670
>> 私が先に行くとコントロールしましょう
ここで、このランダムな単語をクリック、

962
00:42:18,670 --> 00:42:21,230
署名し、その要素を点検します。

963
00:42:21,230 --> 00:42:25,130
Chromeは非常に便利にジャンプします
Facebookが使用しているのh1タグ。

964
00:42:25,130 --> 00:42:27,290
そして、ここでのFacebookに気付く
種類の遅延している

965
00:42:27,290 --> 00:42:29,960
ハードここにプロパティとして、フォントサイズをコード化された。

966
00:42:29,960 --> 00:42:33,530
>> とてもクールなことは、しかしである
私は実際にここに行けば

967
00:42:33,530 --> 00:42:39,560
とまあ、Facebookは、私はそれを好きではない、と言う
64ピクセルは、我々は今のFacebookを変更することができます。

968
00:42:39,560 --> 00:42:42,590
もちろん、我々はそれだけを変更している
私にとって個人的に現時点では。

969
00:42:42,590 --> 00:42:45,150
しかし、これはちょうど別です
私たちのツールキット内のツール

970
00:42:45,150 --> 00:42:48,360
それは私たちが微調整できるようにするために起こっている
と把握し、また診断

971
00:42:48,360 --> 00:42:49,729
私たち自身のウェブページでの問題。

972
00:42:49,729 --> 00:42:52,270
そして、我々は、同様に上に行くことができる
ここでは、同じことである。

973
00:42:52,270 --> 00:42:55,830
あなたが本当に空想取得したい場合、私は
今あなたが本当にページを変異することができ、意味

974
00:42:55,830 --> 00:42:57,380
そしてクレイジーなことを行う。

975
00:42:57,380 --> 00:42:59,870
>> では、なぜこれがすべてに役立ちましたか？

976
00:42:59,870 --> 00:43:02,330
まあ、最終的には、我々はしている
になりたいだろう

977
00:43:02,330 --> 00:43:07,110
そのWebページを作成すること
私たち自身のバックエンドで駆動され、

978
00:43:07,110 --> 00:43:10,520
だけでなく、Googleによると
そこにバックエンドをアウトソーシング。

979
00:43:10,520 --> 00:43:13,510
私たちは、実際にしたい
値は、例えば、

980
00:43:13,510 --> 00:43:18,830
Googleの検索エンジンのアクションの
他の誰かにしない行くために属性を、

981
00:43:18,830 --> 00:43:24,270
しかしsearch.phpのようなものに、
sea​​rch.phpは私たち自身のサーバ上にある場合、

982
00:43:24,270 --> 00:43:25,670
ではない他の誰かの上。

983
00:43:25,670 --> 00:43:30,316
>> だから、実際に私たち、そこに着く
新しい言語を導入する必要があります。

984
00:43:30,316 --> 00:43:33,190
だから我々はすでに1新を見てきました
ここで実際の言語、または2つのHTML

985
00:43:33,190 --> 00:43:33,700
とCSS。

986
00:43:33,700 --> 00:43:36,330
しかし、彼らは本当にただです
構造的および審美的な言語。

987
00:43:36,330 --> 00:43:38,360
彼らは、プログラミングしていない
言語はそれ自体。

988
00:43:38,360 --> 00:43:41,160
そして、それは正式な約限りだ
私たちはそれらに費やすような時間。

989
00:43:41,160 --> 00:43:44,910
私たちが今始まるだろうから
PHPに移行する。

990
00:43:44,910 --> 00:43:48,160
>> だから、PHPは実際ある
プログラミング言語。

991
00:43:48,160 --> 00:43:50,750
これは、スクリプト言語です
それはだという意味で、

992
00:43:50,750 --> 00:43:52,855
軽量であることを意味
C.のようなものよりも

993
00:43:52,855 --> 00:43:56,082
そして、それはインタプリタ言語ですが、
それがコンパイルされていないことを意味します。

994
00:43:56,082 --> 00:43:58,790
だから、一言で言えば、それは何を意味した
我々はCのような言語を使用したとき

995
00:43:58,790 --> 00:44:00,290
そして我々はそれをコンパイルする必要がありました？

996
00:44:00,290 --> 00:44:02,120
それはに何を意味する
Cのソースコードをコンパイル？

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
読者：[聞こえない]。

999
00:44:04,780 --> 00:44:06,184
DAVID Jマラン：再びそれを言う？

1000
00:44:06,184 --> 00:44:07,100
読者：[聞こえない]。

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID Jマラン：パーフェクト。

1003
00:44:08,920 --> 00:44:10,180
それは、バイナリに変換します。

1004
00:44:10,180 --> 00:44:14,200
それは、0と1に変換します
実際の英語のようなソースコードから。

1005
00:44:14,200 --> 00:44:16,424
そして、我々は実際に缶
これらの0と1を実行

1006
00:44:16,424 --> 00:44:18,840
を介してそれらを通過させることにより
ダブルのアイコンをクリックすることで、CPU

1007
00:44:18,840 --> 00:44:19,980
またはコマンドを実行している。

1008
00:44:19,980 --> 00:44:23,770
>> PHPやPythonとRubyの
PerlとJavaScriptと

1009
00:44:23,770 --> 00:44:26,250
およびその他の束
言語が解釈されます

1010
00:44:26,250 --> 00:44:29,290
と言うことです言語、
あなたはそれらをコンパイルしないでください。

1011
00:44:29,290 --> 00:44:34,220
むしろ、あなたがへの入力として、それらを養う
インタプリタと呼ばれるプログラム。

1012
00:44:34,220 --> 00:44:36,640
そのインタプリタ、
どの他の誰かが書いた、

1013
00:44:36,640 --> 00:44:40,930
、一番下にあなたのソースコードのトップを読み込む
右だけ解釈に委ね

1014
00:44:40,930 --> 00:44:43,000
これらのラインとあなたの言うことありません。

1015
00:44:43,000 --> 00:44:45,360
>> だから、あなたが発生した場合
プリントが書かれた行、

1016
00:44:45,360 --> 00:44:48,660
それは必ずしも印刷を変換しない
対応する0と1に。

1017
00:44:48,660 --> 00:44:51,910
それはちょうどように、このインタプリタを持って
言う大きなif条件、

1018
00:44:51,910 --> 00:44:56,110
プログラマの指示がある場合
印刷後、次の手順を実行します。

1019
00:44:56,110 --> 00:44:58,170
だから、それを解釈する
推論の種類によって

1020
00:44:58,170 --> 00:44:59,800
あなたがしなければ、それを言っているのかを通して。

1021
00:44:59,800 --> 00:45:01,320
>> そしてPHPはこれらの言語の一つです。

1022
00:45:01,320 --> 00:45:05,310
とPHP年前に設計されました
正確にWebプログラミングのため。

1023
00:45:05,310 --> 00:45:08,160
そして、それは最初だった
非常にずさんな乱雑な言語。

1024
00:45:08,160 --> 00:45:10,940
そして実際、巨大ながあります
そこに悪いのPHPコードの量。

1025
00:45:10,940 --> 00:45:13,520
しかし、言語そのもの
年間で成熟した、

1026
00:45:13,520 --> 00:45:16,200
今それはだように、そんなに
実際に素晴らしい次のステップ

1027
00:45:16,200 --> 00:45:19,970
教育学Cからのそれはだから
すべてのものになじみそうとびきり

1028
00:45:19,970 --> 00:45:22,380
あなただけの過去数週間で見てきた。

1029
00:45:22,380 --> 00:45:25,724
>> 私たちが表示されます1初期差異
全く主な機能はもうありませんです。

1030
00:45:25,724 --> 00:45:28,890
あなたがコードの記述を開始するとき、それはちょうどだ
どんな実行されない取得するつもり、

1031
00:45:28,890 --> 00:45:30,220
私たちは一瞬で表示されますように。

1032
00:45:30,220 --> 00:45:33,320
一方、ここでは何
変数は、PHPのように見えます。

1033
00:45:33,320 --> 00:45:35,840
それはちょっと違う、
だけかろうじて。

1034
00:45:35,840 --> 00:45:39,380
>> PHPでは、強い型付けはありません。

1035
00:45:39,380 --> 00:45:41,430
週タイピングがあります、
それだけでそこに意味

1036
00:45:41,430 --> 00:45:44,030
文字列のようなデータ型です
と数字や他のもの。

1037
00:45:44,030 --> 00:45:47,030
しかし、あなたが指定して気にしないでください
彼らはもう何。

1038
00:45:47,030 --> 00:45:48,980
PHPはあなたのためにそれを見つけ出し。

1039
00:45:48,980 --> 00:45:52,030
ドル記号はちょうど決定である
PHPの人々が長年行われていること

1040
00:45:52,030 --> 00:45:54,890
前ようにPHPで任意の変数
ただドル記号で始まります。

1041
00:45:54,890 --> 00:45:58,130
それは、その中で実際にこの種の便利だ
それはもう少しあなたに飛び出す。

1042
00:45:58,130 --> 00:46:01,315
>> しかしその後、この
PHPの条件である。

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
C対異なるとは何ですか？

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
何もquestion--トリックない、
これ実際に本当にいいです。

1047
00:46:09,600 --> 00:46:12,140
PHP--同じでブール式。

1048
00:46:12,140 --> 00:46:19,354
とし、対ブール式
または、スイッチ、ループ、ループ、[OK]をloops--、

1049
00:46:19,354 --> 00:46:20,270
この1は異なっている。

1050
00:46:20,270 --> 00:46:22,660
>> だから、そこにい判明
PHPの他の機能のカップル。

1051
00:46:22,660 --> 00:46:25,243
その一つは、実際にある
これ素晴らしく便利です。

1052
00:46:25,243 --> 00:46:29,250
$数字はあなたがした配列の場合
プログラム内で以前に宣言、

1053
00:46:29,250 --> 00:46:33,350
あなたは各構築のために、この空想を持っている
その代わりに、すべてのことをやって

1054
00:46:33,350 --> 00:46:37,020
迷惑な私はある、0に等しい
この未満、[？私は++？]、

1055
00:46:37,020 --> 00:46:40,320
数、各各番号について
それらのドル記号値のちょうどです

1056
00:46:40,320 --> 00:46:42,790
変数、後者
あなたはIとして考えることができます

1057
00:46:42,790 --> 00:46:44,290
あなたが欲しいもの、それを呼び出すことができます。

1058
00:46:44,290 --> 00:46:45,770
私は数それを呼んだ。

1059
00:46:45,770 --> 00:46:48,825
これは反復処理しようとしている
アレイは、番号と呼ぶ。

1060
00:46:48,825 --> 00:46:51,200
各反復で、それはだ
自動的に更新する予定

1061
00:46:51,200 --> 00:46:54,340
あなたのためにドル記号番号
可変するように、あなたは常に

1062
00:46:54,340 --> 00:46:58,210
あなたがしたい変数へのアクセス権を持っている
どの角括弧を行うことなく、

1063
00:46:58,210 --> 00:47:00,980
配列への表記やインデックス作成。

1064
00:47:00,980 --> 00:47:04,950
>> それを超えて、私たちも、のようなものを持っている
ほとんど同じに見えるのアレイ、

1065
00:47:04,950 --> 00:47:08,210
我々はよように、それは、非常に一般的です除き
両方のPHPとJavaScriptで、参照してください。

1066
00:47:08,210 --> 00:47:10,750
事前に配列を初期化する
角括弧を使用した。

1067
00:47:10,750 --> 00:47:12,040
Cは、中括弧を使用しています。

1068
00:47:12,040 --> 00:47:15,330
だから、にもかかわらず、わずかに異なるです
私たちは本当に多くのことトリックを使用していませんでした。

1069
00:47:15,330 --> 00:47:20,090
>> しかし、さらに力強く、
PHPは連想配列を持って、

1070
00:47:20,090 --> 00:47:23,100
その空想的な方法です
ハッシュテーブルを言うの。

1071
00:47:23,100 --> 00:47:31,610
実際には、ハッシュを宣言したい場合は、
C--でどのように多くのとは異なり、PHPのテーブル、

1072
00:47:31,610 --> 00:47:34,775
コー​​ドの行は、それがにかかりました
実際にC言語でハッシュテーブルを実装する？

1073
00:47:34,775 --> 00:47:38,310
それとも、何行のコードである
Cでハッシュテーブルを実装するために取って？

1074
00:47:38,310 --> 00:47:39,820
だから、右、おそらく多くのですか？

1075
00:47:39,820 --> 00:47:41,680
それは多分、100または200数十です。

1076
00:47:41,680 --> 00:47:42,980
それは自明だ。

1077
00:47:42,980 --> 00:47:45,420
それともとして、であることが約だ
あなたはすぐに、自明でない表示されます

1078
00:47:45,420 --> 00:47:48,080
ハッシュテーブルを実装する
[聞こえない]とも試してみる。

1079
00:47:48,080 --> 00:47:50,580
しかしPHP--でかつ率直に言って、私は
おそらくあなたにこれを言うべきではありません

1080
00:47:50,580 --> 00:47:53,630
PHPでMonday--までは、もし
あなたが行って、テーブルが欲しい。

1081
00:47:53,630 --> 00:47:56,431
つまり、ハッシュtable--そうだ
コー​​ドの1行を持つ。

1082
00:47:56,431 --> 00:47:56,930
と

1083
00:47:56,930 --> 00:47:58,810
>> 言語の多くは、それを行う。

1084
00:47:58,810 --> 00:48:00,190
PSET 5を楽しんでいる。

1085
00:48:00,190 --> 00:48:01,980
だから、言語の多くは、これを行う。

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
彼らはあなたにこれらの抽象を与える
他の人、他のプログラマ、

1088
00:48:06,140 --> 00:48:09,870
そのようにあなたのために作成した
あなたは彼らの肩の上に立つことができる

1089
00:48:09,870 --> 00:48:13,290
とスーパーであるアイデアの使用を開始
ハッシュテーブルや木のような、説得力のある

1090
00:48:13,290 --> 00:48:14,140
としようとします。

1091
00:48:14,140 --> 00:48:17,790
しかし、あなたは必ずしもする必要はありません
それらのものを自分で実装しています。

1092
00:48:17,790 --> 00:48:20,850
>> だから最終的には、どのような
我々はPHPを使用するつもりだ

1093
00:48:20,850 --> 00:48:23,580
潜在的にプログラムを書いている
いわゆるコマンドライン。

1094
00:48:23,580 --> 00:48:26,600
私たちは、すべてのプログラムを作り直すことができ
我々は、これまで、この学期を書きました

1095
00:48:26,600 --> 00:48:30,410
SPLを使用しています多分ブレイクアウトを除いて、
その瞬間に、Cに固有のものです。

1096
00:48:30,410 --> 00:48:33,100
しかし、他のすべての問題が設定され、
確かにマリオとシーザー

1097
00:48:33,100 --> 00:48:35,300
そしてVigenereと
[？ ？クラック]以降、私​​たち

1098
00:48:35,300 --> 00:48:39,520
PHPで再実装でき、
おそらく、もう少し簡単に。

1099
00:48:39,520 --> 00:48:43,050
>> しかし、我々は最終的に起こっているのか
WebプログラミングでPHPを使用する。

1100
00:48:43,050 --> 00:48:46,420
そして、私たちは次の紹介するつもりだ
週メンタルモデル、と呼ばれるパラダイム

1101
00:48:46,420 --> 00:48:49,610
MVCは、モデル·ビュー·コントローラ、
そのあなたがプログラミングをやった場合には

1102
00:48:49,610 --> 00:48:51,610
Pythonで前または
Rubyや他の場所で、あなた

1103
00:48:51,610 --> 00:48:54,112
このチームと知っているかもしれません
RailsとDjangoとなどである。

1104
00:48:54,112 --> 00:48:55,820
しかし、あなたはに新しいしている場合は、
これも、あなたが表示されます

1105
00:48:55,820 --> 00:48:59,652
これは実際には非常に自然であること
因数分解の延長

1106
00:48:59,652 --> 00:49:01,360
とデザインのソート
私たちはしたコードの

1107
00:49:01,360 --> 00:49:04,670
Cでやって我々は今するつもりだ
PHPにそれらの教訓のいくつかを適用する

1108
00:49:04,670 --> 00:49:07,190
最終的に、私たちはあるように
私たち自身のウェブサイトを実装する。

1109
00:49:07,190 --> 00:49:09,080
そして、あなたはソートのなら
魅了または驚い

1110
00:49:09,080 --> 00:49:10,954
私たちはやろうとしていること
こんなに早く、すべての、

1111
00:49:10,954 --> 00:49:13,410
ほとんどすべてのことを実現する
学期、90％近く

1112
00:49:13,410 --> 00:49:16,560
ものを含めて学生CS50の
誰が、以前にプログラムされたことがない

1113
00:49:16,560 --> 00:49:20,329
最終的なプロジェクトを作ってしまうこと
Webプログラミングに基づいています。

1114
00:49:20,329 --> 00:49:23,120
だからあなたが戻っていることがわかります
今後数週間で高い。

1115
00:49:23,120 --> 00:49:24,965
だから我々は月曜日に、あなたが表示されます。

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1：そして今、ディープ
Davenファーナムによって思考。

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
ハッシュテーブル。

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [笑い]

1122
00:49:38,402 --> 00:49:38,902