1
00:00:00,000 --> 00:00:03,486
>> [音楽再生]

2
00:00:03,486 --> 00:00:10,460

3
00:00:10,460 --> 00:00:14,250
>> DAVID Jマラン：これはCS50であり、
これは、週7の開始です。

4
00:00:14,250 --> 00:00:15,060
だから、戻って歓迎します。

5
00:00:15,060 --> 00:00:17,540
そして、あなたはそれを思い出して
問題の4つのセット、

6
00:00:17,540 --> 00:00:21,510
スカベンジャーハントのビットがありました
これにより、いくつかの素晴らしい賞品のために

7
00:00:21,510 --> 00:00:24,219
あなたは写真を回復した後、
両方こことニューヘブンのスタッフが、

8
00:00:24,219 --> 00:00:27,468
あなたはのような多くを見つけるために、チャレンジしました
あなたができる限り、それらのコンピュータ科学者。

9
00:00:27,468 --> 00:00:29,550
そして、我々は、全体を持っています
提出の束。

10
00:00:29,550 --> 00:00:31,930
私はいくつかを共有しようと思いました
あなたと今日ここに。

11
00:00:31,930 --> 00:00:35,100
>> そして、我々はこれらのオンラインのすべてを投稿します。

12
00:00:35,100 --> 00:00:39,310
しかし、特に、私はしたかったです
よく1 to--あなたの注意を引きます、

13
00:00:39,310 --> 00:00:42,670
サムはそれらのかなりの数にありました
一般的にこのようなポーズ。

14
00:00:42,670 --> 00:00:45,750
しかし、それはのように、その表示されます
今朝、勝者

15
00:00:45,750 --> 00:00:51,170
特定の誰かがでケンに選ばれました
カメラでキャプチャされ、スタッフの24

16
00:00:51,170 --> 00:00:54,600
あなたに取る場合、または少数のより多くの
写真に複数のスタッフを占めています。

17
00:00:54,600 --> 00:00:58,300
こちらの写真は次のケンです
ニューヘブンのメアリーに。

18
00:00:58,300 --> 00:01:01,300
>> 今、ケンは、しかし、ターン
アウトコーナーケースのビットです

19
00:01:01,300 --> 00:01:02,880
それはまだ前に起こっていません。

20
00:01:02,880 --> 00:01:05,713
それが起こらなかったことが判明
私には問題で細かい活字を置くために

21
00:01:05,713 --> 00:01:09,710
スタッフであることを述べている4を設定
素晴らしい賞品の対象外

22
00:01:09,710 --> 00:01:13,130
ケンは、もちろん、の1つであるため
スタッフの写真家。

23
00:01:13,130 --> 00:01:16,820
さて、そうは言って、彼
もともと言って私を書きました

24
00:01:16,820 --> 00:01:19,180
オンラインこれらの写真を投稿しないでください。

25
00:01:19,180 --> 00:01:21,630
私は、大部分で考えます
写真のほとんどのため、

26
00:01:21,630 --> 00:01:24,499
この写真は見ていたこと
このような小さなもの。

27
00:01:24,499 --> 00:01:25,040
等が挙げられます。

28
00:01:25,040 --> 00:01:28,990
>> しかし、ケンは私があなたを安心させたいです
彼は非常に良い写真だと、

29
00:01:28,990 --> 00:01:33,190
彼は、彼がプロとります
ぼやけていない写真、

30
00:01:33,190 --> 00:01:37,270
その焦点に優れている、と彼
私たち自身のスタッフのかなりの数を取りました。

31
00:01:37,270 --> 00:01:40,370
しかし、唯一認めるのではなく、
我々は我々が行うだろうと思って何ケン、

32
00:01:40,370 --> 00:01:43,390
のリストを通過さ
提出され、実際の学生。

33
00:01:43,390 --> 00:01:48,640
そして、それはそれでランスが判明
今朝のように15の写真

34
00:01:48,640 --> 00:01:50,030
私たちの勝者でした。

35
00:01:50,030 --> 00:01:55,730
>> そして、ここで描かれるが、コルトンとランスであります
Skazと、自分自身と、そしてサムと。

36
00:01:55,730 --> 00:02:00,230
しかし、それが判明しているのように
11:46ので、ほんの少し前に、

37
00:02:00,230 --> 00:02:04,380
私は私の電子メールに戻って、見つかりました
我々はまだもう一つの提出があったこと

38
00:02:04,380 --> 00:02:08,300
ボニーという名前の学生が
そのメールには、これだけを述べました。

39
00:02:08,300 --> 00:02:10,800
嘘をつくつもりはない、私はよ
授業中にこれを行います。

40
00:02:10,800 --> 00:02:17,620
そして、ちょうど添付を進め
14写真、ランスの15の内気な1。

41
00:02:17,620 --> 00:02:22,690
>> しかし、ボニーの写真では、ターン
サムは、複数のスタッフ出ました

42
00:02:22,690 --> 00:02:25,960
これらの中でも、私たちは私たちが考えたもの
どうなるこれらの両方を認めるです。

43
00:02:25,960 --> 00:02:29,240
だから、Dropboxのを得ることに加えて、
誰もが参加したスペース

44
00:02:29,240 --> 00:02:33,900
受け取り、これらの2つのセクションでは、また意志
彼らのために素敵な仕出し弁当を受け取ります

45
00:02:33,900 --> 00:02:36,100
そのセクション
この来週かみ合います。

46
00:02:36,100 --> 00:02:38,970
そして、あなたは私たちから聞こえます、
それについてランスとボニー、。

47
00:02:38,970 --> 00:02:40,002
彼らにそう大きなおめでとう。

48
00:02:40,002 --> 00:02:42,210
さて、あなたのそれらは誰でしょう
昼食のような、より一般的に

49
00:02:42,210 --> 00:02:45,320
ケンブリッジでそのCS50ランチを知っています
ニューヘブンは今週の金曜日です。

50
00:02:45,320 --> 00:02:48,510
CS50のウェブサイトのスラッシュRSVPに移動します。

51
00:02:48,510 --> 00:02:49,800
そして今、セミナーの言葉。

52
00:02:49,800 --> 00:02:50,730
もっとcurricularly。

53
00:02:50,730 --> 00:02:52,490
だから我々は近づいています
学期のポイント

54
00:02:52,490 --> 00:02:55,200
あなたが開始する場所
最終的なプロジェクトについて考えます。

55
00:02:55,200 --> 00:02:59,309
そして、実際には、少しだけで、意志
いわゆるプリ提案が原因である可能。

56
00:02:59,309 --> 00:03:01,850
だから、事前の提案はに意図されています
本当にかなり低い影響であると

57
00:03:01,850 --> 00:03:04,109
ためだけのチャンス
あなたは短いメモを構成します

58
00:03:04,109 --> 00:03:06,900
知らせるためにあなたの指導員
彼または彼女はあなたの考えているもの

59
00:03:06,900 --> 00:03:09,140
あなたの最終的なプロジェクトのために何をしたいかもしれません。

60
00:03:09,140 --> 00:03:11,730
>> 今、多くの学生が終わります
Webベースの最終的なプロジェクトをやって。

61
00:03:11,730 --> 00:03:13,800
そしてもちろん、私たちはしています
このようになりまし先週

62
00:03:13,800 --> 00:03:15,890
およびWebプログラミングへのダイビングを超えました。

63
00:03:15,890 --> 00:03:18,200
だから場合は、心配しないように
どのように絶対にないアイデアを持っていません

64
00:03:18,200 --> 00:03:21,594
あなたはその考えを建設します
あなたはあなたの心を持っている可能性があります。

65
00:03:21,594 --> 00:03:24,510
これは実際には強制関数であります
あなたが考え、話しを取得します

66
00:03:24,510 --> 00:03:25,650
それについてのあなたのTFと。

67
00:03:25,650 --> 00:03:28,810
しかし、それのお手伝いをし、
最終的に、最終的なプロジェクトで、

68
00:03:28,810 --> 00:03:31,750
CS50は、伝統を持っていることを知っています
セミナーを提供しています。

69
00:03:31,750 --> 00:03:36,084
>> そして、これらは、上の手はオプションです、
や講義の機会に基づいて、

70
00:03:36,084 --> 00:03:39,000
あるトピックについての詳細を学ぶために
コー​​スのほとんどに補助

71
00:03:39,000 --> 00:03:43,310
シラバス、それでも素晴らしいです
最終的なプロジェクトを推進するための材料。

72
00:03:43,310 --> 00:03:46,840
そして、これはだリストです。
ここでニューヘブンのCS50スタッフ

73
00:03:46,840 --> 00:03:48,600
用が出ています
iOSの約今年

74
00:03:48,600 --> 00:03:50,730
プログラミング、アンドロイド
プログラミング、ゲーム開発、

75
00:03:50,730 --> 00:03:54,480
より多くのツールのと房
そして言語と技術。

76
00:03:54,480 --> 00:03:56,780
>> だからCS50のウェブサイトに目を離さありません。

77
00:03:56,780 --> 00:04:00,110
そしてその間に、あなたがしたい場合
これらのいずれかであなたの興味を登録し、

78
00:04:00,110 --> 00:04:02,510
CS50のスラッシュ・レジスタにアクセスしてください。

79
00:04:02,510 --> 00:04:05,770
そして、私たちはその後のようフォローアップします
日と飛行時間と場所

80
00:04:05,770 --> 00:04:09,090
そして、everything--ほとんどすべては意志
オンデマンドでストリーミングも利用できること

81
00:04:09,090 --> 00:04:11,750
あなたが実際にそれを作ることができない場合は後。

82
00:04:11,750 --> 00:04:15,800
だから、難しい話は抜きにして、我々
GETとの最後の時間をオフに左。

83
00:04:15,800 --> 00:04:19,610
>> そして、これがされたメッセージのようでした
仮想エンベロープの内側に、リコール、

84
00:04:19,610 --> 00:04:23,960
我々は、ルータにルータから渡されたこと
Webブラウザとウェブとの間のルータ

85
00:04:23,960 --> 00:04:24,487
サーバー。

86
00:04:24,487 --> 00:04:26,695
そして、そのメッセージが見えました
このような小さなもの。

87
00:04:26,695 --> 00:04:29,700
これは、より難解なメッセージでした
封筒の中に実際にありました

88
00:04:29,700 --> 00:04:34,440
一枚の紙に書かれました
最初の行は文字通り、スラッシュを得ると言います。

89
00:04:34,440 --> 00:04:37,830
>> そして、ちょうど健全性チェックとして、
スラッシュが何を意味するのですか？

90
00:04:37,830 --> 00:04:40,455
スラッシュは何を意味しているとき
ウェブサイトを要求しますか？

91
00:04:40,455 --> 00:04:43,070

92
00:04:43,070 --> 00:04:44,250
あなたはすべての時間を要求します。

93
00:04:44,250 --> 00:04:47,333
あなたは、あなたのウェブサイトを訪問するほとんどの任意の時間
実際にファイル名を入力しないでください。

94
00:04:47,333 --> 00:04:50,960
あなたはおそらく、Facebook.comに行きます
、gmail.comなどを入力してください。

95
00:04:50,960 --> 00:04:52,260
スラッシュは何を表すのでしょうか？

96
00:04:52,260 --> 00:04:53,506
どのファイル？

97
00:04:53,506 --> 00:04:54,630
または特異的に何ページ、？

98
00:04:54,630 --> 00:04:59,642

99
00:04:59,642 --> 00:05:00,720
>> インデックス、ええ。

100
00:05:00,720 --> 00:05:01,810
デフォルトのページそう。

101
00:05:01,810 --> 00:05:04,810
ですから、ファイルを指定しない場合
私たちが見ることから始めましょうとして名前を付け、

102
00:05:04,810 --> 00:05:07,750
あなたは実際には要求しています
私のFacebookのデフォルトページを与えます

103
00:05:07,750 --> 00:05:10,800
または私は私の受信トレイを与えるか、または与えます
私ニュースのデフォルトページ

104
00:05:10,800 --> 00:05:12,510
CNNのウェブサイト上など。

105
00:05:12,510 --> 00:05:15,220
そして、サーバは、応答します
何かでそのメッセージ

106
00:05:15,220 --> 00:05:18,420
このように、私は、そう言って
HTTPバージョン1.1を話します。

107
00:05:18,420 --> 00:05:21,130
>> ステータス200、
私たちはめったにない人間コード

108
00:05:21,130 --> 00:05:22,790
それは良いことだので、これまで参照してください。

109
00:05:22,790 --> 00:05:26,640
それはOK、要求を意味しているので
受信し、適切に処理されていました。

110
00:05:26,640 --> 00:05:28,960
そして、コンテンツの種類
明らかに応答して、

111
00:05:28,960 --> 00:05:31,170
かなり頻繁に、常にではないが、テキストです。

112
00:05:31,170 --> 00:05:32,580
具体的には、HTML。

113
00:05:32,580 --> 00:05:34,760
そして、それは実際のです
ここで、我々が今日見てください。

114
00:05:34,760 --> 00:05:37,140
>> だから実際には、私は行くつもりです
先に、ブラウザを開きます。

115
00:05:37,140 --> 00:05:40,410
私はあなたが使用することができ、Chromeを使用するつもりです
来て数週間でほとんどすべてのブラウザ。

116
00:05:40,410 --> 00:05:42,410
我々は、一般的にChromeをお勧めします
それは特にだから

117
00:05:42,410 --> 00:05:43,750
ソフトウェア開発者のための良いです。

118
00:05:43,750 --> 00:05:46,070
これを内蔵の多くを持っています
それを簡単にするツール

119
00:05:46,070 --> 00:05:49,800
HTMLとCSSだけでなく開発するために、
物事私たちは、今日の話を始めましょう、

120
00:05:49,800 --> 00:05:51,530
だけでなく、他の言語にも。

121
00:05:51,530 --> 00:05:55,530
>> そして、私は先に行くと行くつもりですto--
私は、クリックまたは右を制御するつもりです

122
00:05:55,530 --> 00:05:57,210
Webページ上の任意の場所をクリックします。

123
00:05:57,210 --> 00:05:59,070
そして、私は要素を点検するために行くつもりです。

124
00:05:59,070 --> 00:06:03,850
そして、私は私を微調整するつもりです
ここで画面が少しだけ。

125
00:06:03,850 --> 00:06:05,790
私は一番下にこれを移動してみましょう。

126
00:06:05,790 --> 00:06:08,140
だから、これはと呼ばれるものです
Chromeのインスペクタ。

127
00:06:08,140 --> 00:06:11,010
だから、これはデバッグのようなものです
このツールは、クロームに組み込まれました。

128
00:06:11,010 --> 00:06:13,520
>> あなたのすべては、すでにこれを持っています
あなたはChromeを使用してきた場合。

129
00:06:13,520 --> 00:06:17,169
そして、それはあなたが何が起こっているのか確認することができます
一部のWebページのボンネットの下に。

130
00:06:17,169 --> 00:06:19,210
それでは、実際に見てみましょう
次のようにこれを見て。

131
00:06:19,210 --> 00:06:21,251
これは、方法より多くの機能を持っています
私たちは今日気に。

132
00:06:21,251 --> 00:06:22,760
しかし、ここの上にこれらのタブがあります。

133
00:06:22,760 --> 00:06:25,890
要素、ネットワーク、ソース、
タイムライン、およびいくつかの他のもの。

134
00:06:25,890 --> 00:06:27,800
私はをクリックするつもりです
一瞬のためのネットワーク。

135
00:06:27,800 --> 00:06:30,500
>> そして、それは少し圧倒的です
ここに一見。

136
00:06:30,500 --> 00:06:34,190
しかし、私はするつもりですが許可されます
私はそれを少し簡略化します。

137
00:06:34,190 --> 00:06:37,560
私はオンにするつもりです
それは赤だように、光を記録します。

138
00:06:37,560 --> 00:06:39,140
そして、私は、ログを保存すると言うつもりです。

139
00:06:39,140 --> 00:06:41,015
そして、これはほんの少しです
私は考え出したもの

140
00:06:41,015 --> 00:06:44,120
保存するために起こっているの経時
ブラウザで起こるすべて。

141
00:06:44,120 --> 00:06:50,030
そして今、私は行くつもりです
http://facebook.comへ。

142
00:06:50,030 --> 00:06:52,690
>> 実際には、のは、WWWをやらせます
良い測定のために、スラッシュ。

143
00:06:52,690 --> 00:06:53,643
入力します。

144
00:06:53,643 --> 00:06:56,180
多くのだからURL
あなたが訪問している可能性があります。

145
00:06:56,180 --> 00:06:58,830
そして今、Facebookのウェブ
ページが一番上にアップします。

146
00:06:58,830 --> 00:07:02,350
そして、その後の全体の束
ものは下部にあることで飛びました。

147
00:07:02,350 --> 00:07:04,830
実際には、ことが判明
あなたがFacebook.comを訪問したとき、

148
00:07:04,830 --> 00:07:09,320
あなただけの1つのHTTPリクエストを行っていません、
それはFacebook.comに行くことが判明

149
00:07:09,320 --> 00:07:14,320
これらの封筒の41を送信し、
独自のget要求とそれぞれ、

150
00:07:14,320 --> 00:07:18,360
スクリーンの後ろにもかかわらず、示されるように、
ここでは、画面の下部に、

151
00:07:18,360 --> 00:07:24,040
それは、確かに、私のことを示しています
ブラウザは、41の要求をしました。

152
00:07:24,040 --> 00:07:29,689
>> 合計では、861を転送しました
キロバイト、それが何らかの理由で取りました

153
00:07:29,689 --> 00:07:31,730
最大8つの秒
そのすべてをダウンロードします。

154
00:07:31,730 --> 00:07:33,790
だから、実際には少し奇妙です
Facebookのサイトはそれを取るだろうと

155
00:07:33,790 --> 00:07:35,600
長い間、そのように、この場合にあってもよいです。

156
00:07:35,600 --> 00:07:39,520
さて、このすべては、私は本当に気にしません
一番上の要求を除いています。

157
00:07:39,520 --> 00:07:46,440
それでは、右ここでこの1に行きましょう
私はちょっとズームアウトしてみましょう。

158
00:07:46,440 --> 00:07:47,754
>> そして、私はこれにズームインできます。

159
00:07:47,754 --> 00:07:50,670
だから私は、にもかかわらず、左に何をやりましたか
こっちで起こっがたくさんあり​​ます

160
00:07:50,670 --> 00:07:53,360
私が強調表示されました
Facebook.comして、

161
00:07:53,360 --> 00:07:56,540
、私はスクロールダウンしていていることがわかり
、下にスクロール下にスクロール

162
00:07:56,540 --> 00:07:58,330
ヘッダーを要求します。

163
00:07:58,330 --> 00:08:01,720
そして、あなたはChromeが表示されていることがわかります
私基本的に内側の内容

164
00:08:01,720 --> 00:08:02,810
私が作った要求の。

165
00:08:02,810 --> 00:08:06,130
それは全く同じで書式いません
方法が、取得の言及があると気づきます、

166
00:08:06,130 --> 00:08:09,481
通知ホストの言及があり、
Facebook.com、パス、またはスラッシュ、

167
00:08:09,481 --> 00:08:10,730
これは私が要求されたファイルです。

168
00:08:10,730 --> 00:08:12,930
>> そして、私はスクロールする場合
バックアップ、我々は実際によ

169
00:08:12,930 --> 00:08:17,270
何Facebookが返されることを確認
私には、これらのヘッダのすべてです。

170
00:08:17,270 --> 00:08:21,040
だから、その仮想エンベロープの内側
実際にキーと値のペアがたくさんあり​​ます。

171
00:08:21,040 --> 00:08:23,130
単語、コロン、およびその値。

172
00:08:23,130 --> 00:08:25,050
単語、コロン、および値。

173
00:08:25,050 --> 00:08:26,160
これらは、ヘッダと呼ばれています。

174
00:08:26,160 --> 00:08:31,860
ところで、より詳細には、よりここにあります
私たちは実際に今気に。

175
00:08:31,860 --> 00:08:33,750
>> しかし、これは2番目です
そこに最後の1、

176
00:08:33,750 --> 00:08:38,809
予告、Facebook.comのサーバーこと、
確かに、ここで述べたいくつかのテキストのHTMLを付属しています。

177
00:08:38,809 --> 00:08:41,409
だから、このすべてが言うことです
それは、Webを要求したとき

178
00:08:41,409 --> 00:08:44,300
にブラウザからページ
サーバーは、そのサーバーが応答

179
00:08:44,300 --> 00:08:47,630
自己のエンベロープ
その内のテキストです。

180
00:08:47,630 --> 00:08:49,020
つまり、HTML。

181
00:08:49,020 --> 00:08:50,590
ハイパーテキストマークアップ言語。

182
00:08:50,590 --> 00:08:53,200
どの他の言語で
今日はご紹介していること

183
00:08:53,200 --> 00:08:57,740
人間やコンピュータが生成していること
ためにウェブページを実装します。

184
00:08:57,740 --> 00:08:59,580
>> 具体的には、のは、このを見てみましょう。

185
00:08:59,580 --> 00:09:03,277
私はすぐに戻って行くつもりです
Facebookのウェブサイトへ。

186
00:09:03,277 --> 00:09:05,360
そして、私はちょうどに行きますよ
コントロールのクリック、または右クリック

187
00:09:05,360 --> 00:09:07,634
そして、ページのソースを表示をクリックしてください。

188
00:09:07,634 --> 00:09:10,550
そして、あなたはChromeを使用しない場合でも、
IEはこれを行うことができ、Firefoxはこれを行うことができ、

189
00:09:10,550 --> 00:09:14,060
Safariはあっても、メニューかかわらず、これを行うことができます
オプションは少し違って見えるかもしれません。

190
00:09:14,060 --> 00:09:18,990
そして、これは、HTMLのマークであり、
フェイスブックでの会社が書かれています。

191
00:09:18,990 --> 00:09:24,640
>> そして、ここでは総称して、この言語
青と​​白のページを実装

192
00:09:24,640 --> 00:09:26,370
私たちは一瞬前に見たこと。

193
00:09:26,370 --> 00:09:28,030
さて、このビットが圧倒的です。

194
00:09:28,030 --> 00:09:31,400
我々は左上を見上げるなら、私たちはしています
いくつかのパターンを見に開始する予定。

195
00:09:31,400 --> 00:09:34,140
たくさんあり​​ますように見えます
これらの開角ブラケットの

196
00:09:34,140 --> 00:09:35,970
そして、このキーワードのHTMLがあります。

197
00:09:35,970 --> 00:09:38,330
ここでは別のオープンです
アングルブラケットとヘッド。

198
00:09:38,330 --> 00:09:41,560
>> 我々は下にスクロールした場合ここで、あります
ダウンダウン、私はよ

199
00:09:41,560 --> 00:09:43,820
先に行くとしようとするつもり
何かを検索します。

200
00:09:43,820 --> 00:09:48,510
そこ途中以上の右側に
ここでは、オープンブラケット本体です。

201
00:09:48,510 --> 00:09:50,800
そして最後からリコール
私たちが提案された時間

202
00:09:50,800 --> 00:09:53,364
最も簡単なWebページその
人間が書くかもしれません

203
00:09:53,364 --> 00:09:55,030
このような小さなになります。

204
00:09:55,030 --> 00:09:58,430
オープンHTMLタグ、オープンヘッド
タグ、オープンタイトルタグ、

205
00:09:58,430 --> 00:10:03,230
その後、閉じたタイトル、閉鎖性頭部、オープン
bodyタグ、テキストの一部は、身体を閉じ、

206
00:10:03,230 --> 00:10:04,720
HTMLは閉じました。

207
00:10:04,720 --> 00:10:06,290
>> しかし、ちょっとここで一時停止。

208
00:10:06,290 --> 00:10:09,030
このコード、あなたがきた場合でも、
それを前に書かれたことはありません

209
00:10:09,030 --> 00:10:11,864
それでもかなり理解していません
何が起こっているのか、なかなか良さそうです。

210
00:10:11,864 --> 00:10:12,821
右、それは非常にきれいです。

211
00:10:12,821 --> 00:10:14,120
それは非常に文体うれしいです。

212
00:10:14,120 --> 00:10:16,190
インデントや空白がたくさん。

213
00:10:16,190 --> 00:10:18,020
Facebookのではありません。

214
00:10:18,020 --> 00:10:23,190
なぜFacebookはそんなにあり
HTMLを書くことで、私よりも悪いですか？

215
00:10:23,190 --> 00:10:24,310
どうやら。

216
00:10:24,310 --> 00:10:26,899
>> 右、これは、1つのようなものです
スタイルのための5つのうち。

217
00:10:26,899 --> 00:10:29,315
説得力のある理由があります
彼らのためにこれらのコーナーをカットします。

218
00:10:29,315 --> 00:10:31,069

219
00:10:31,069 --> 00:10:33,860
すべての権利なので、彼らはしたくありません
それが簡単にあなたがそれを読んでできるようにするため。

220
00:10:33,860 --> 00:10:36,940
だから、ある意味では、彼らがしています
それを難読化、ソートのそれをスクランブル

221
00:10:36,940 --> 00:10:40,260
少なくとも審美的にそう
それはMyspaceのために難しくなっていること

222
00:10:40,260 --> 00:10:42,705
行くとそのリッピングします
ホームページとそれ用のHTML。

223
00:10:42,705 --> 00:10:45,080
それは、プログラムとことが​​判明
クロムを含むけれども、

224
00:10:45,080 --> 00:10:47,020
我々は、超簡単にこれをクリーンアップすることができます。

225
00:10:47,020 --> 00:10:49,420
だから、その理由としてそれほどではありません。

226
00:10:49,420 --> 00:10:51,290
他に何が原因である可能性があります。

227
00:10:51,290 --> 00:10:51,790
うん。

228
00:10:51,790 --> 00:10:54,680

229
00:10:54,680 --> 00:10:55,890
うん、ホワイトスペースコストデータ。

230
00:10:55,890 --> 00:10:56,598
どういう意味ですか？

231
00:10:56,598 --> 00:11:02,250

232
00:11:02,250 --> 00:11:02,979
うん、まさに。

233
00:11:02,979 --> 00:11:06,020
あなたは[Tab]キーロットまたはヒットした場合
スペースバーは、意味を考えてみましょう。

234
00:11:06,020 --> 00:11:10,060
だから、キーボードのすべてのキーがあります
[聞こえない] 1バイトとして表現。

235
00:11:10,060 --> 00:11:14,560
>> だから、マークまたは開発者のいずれかを考えます
これらの日は、一度だけ、スペースバーをヒット

236
00:11:14,560 --> 00:11:17,899
このHTMLページでその
Facebookのホームページを表します。

237
00:11:17,899 --> 00:11:19,690
そしてFacebookはたくさん持っています
ユーザーのこれらの日。

238
00:11:19,690 --> 00:11:24,030
だから、Facebookのホームページと仮定
今日億人が訪れています。

239
00:11:24,030 --> 00:11:27,020
Facebookで誰かが持っています
一度だけ、スペースバーを押してください。

240
00:11:27,020 --> 00:11:29,890
>> だから、一つの追加のバイト、
億を要求、

241
00:11:29,890 --> 00:11:32,790
どれだけ多くのデータがFacebookのです
インターネットを介して転送します

242
00:11:32,790 --> 00:11:37,160
誰かがヒットするので
彼または彼女のキーボードのスペースバー？

243
00:11:37,160 --> 00:11:41,660
億バイト、1ギガバイトのか
データは、Facebookのサーバーから送信されています

244
00:11:41,660 --> 00:11:43,626
周りの人へ
正当な理由なく世界。

245
00:11:43,626 --> 00:11:44,750
さて、それはただ1スペースです。

246
00:11:44,750 --> 00:11:48,866
>> 我々は実際にこれをきれい場合を想像
事アップし、それをインデントして、コメントを追加

247
00:11:48,866 --> 00:11:50,990
ホワイトスペースの多くと
タブ文字とスペース、

248
00:11:50,990 --> 00:11:53,656
あなたが支出ギガバイトに終わります、
そうでない場合はテラバイトのスペースより。

249
00:11:53,656 --> 00:11:56,640
だから超共通で
Web開発の実際の世界

250
00:11:56,640 --> 00:11:58,950
あなたのコードを縮小することです。

251
00:11:58,950 --> 00:12:01,280
そして、私たちは最終的に表示されます
どのようにこれを行う可能性があります。

252
00:12:01,280 --> 00:12:04,630
>> しかし、今日、私たちはコードを書き始めましょう
それは私たち人間が実際に読みやすいです。

253
00:12:04,630 --> 00:12:10,120
あなたが戻って行く場合は、しかし、判明します
Chromeでこのツールに要素を点検し、

254
00:12:10,120 --> 00:12:12,030
以前、我々は、[ネットワーク]タブにありました。

255
00:12:12,030 --> 00:12:15,430
それはあなたがに行けばことが判明
あなたが実際に見るものの要素]タブ、

256
00:12:15,430 --> 00:12:19,230
Chromeのかなり印刷されています
その同じHTMLのバージョン。

257
00:12:19,230 --> 00:12:20,640
だから我々はそれをdeobfuscatedました。

258
00:12:20,640 --> 00:12:22,472
だから、コンピュータの一致ません。

259
00:12:22,472 --> 00:12:24,430
そして今、あなたが実際にすることができます
周りにクリックして起動します

260
00:12:24,430 --> 00:12:27,630
Webページで階層を表示します。

261
00:12:27,630 --> 00:12:28,780
それでは、実際にこれを実行してみましょう。

262
00:12:28,780 --> 00:12:32,120
私が先に行くと上の開くつもりです
私のMacのテキスト編集と呼ばれるプログラム。

263
00:12:32,120 --> 00:12:35,490
そして、これがちょうどであることを思い出します
超シンプルなテキストプログラム。

264
00:12:35,490 --> 00:12:37,490
Windowsはnotepad.exeをしています。

265
00:12:37,490 --> 00:12:39,820
そして、私はそのままに行きますよ
次のように入力します。

266
00:12:39,820 --> 00:12:44,650
ドキュメントタイプのHTM​​L、オープンブラケット
HTMLは、ブラケットHTMLを閉じ、

267
00:12:44,650 --> 00:12:49,000
我々は、こちらのページの頭を持っています
こちらのページの頭の終わり、

268
00:12:49,000 --> 00:12:52,310
タイトルは、Hello Worldのようになります。

269
00:12:52,310 --> 00:12:56,660
>> そしてここに至るまで、私たちは必要
Webページのボディ。

270
00:12:56,660 --> 00:12:58,050
クローズドボディ。

271
00:12:58,050 --> 00:13:00,700
そしてここで、Hello Worldの。

272
00:13:00,700 --> 00:13:01,270
大丈夫。

273
00:13:01,270 --> 00:13:03,350
だから我々は、超高速のWebページを書いています。

274
00:13:03,350 --> 00:13:06,675
私はとして保存するつもりです
私のデスクトップ上hello.html。

275
00:13:06,675 --> 00:13:09,050
私のMacのは、文句を言うつもり
ちょっと待って、と思って、

276
00:13:09,050 --> 00:13:11,091
これはテキストフ​​ァイルで、行います
あなたはそれを.TXT呼びたいですか？

277
00:13:11,091 --> 00:13:13,300
しかし、いや、私は、ドットHTMLを使用したいと思います。

278
00:13:13,300 --> 00:13:16,140
>> 私があればそして素敵なものです
ただ、このファイルをダブルクリック

279
00:13:16,140 --> 00:13:18,600
hello.html、ここで私のWebページです。

280
00:13:18,600 --> 00:13:22,564
残念ながら、私は
世界で唯一の人物

281
00:13:22,564 --> 00:13:23,980
誰が今、このページを訪問することができます。

282
00:13:23,980 --> 00:13:26,734
ここでそれは明らかに住んでないから？

283
00:13:26,734 --> 00:13:27,650
それは右、私のMac上でですか？

284
00:13:27,650 --> 00:13:28,470
どの無用です。

285
00:13:28,470 --> 00:13:30,390
この部屋には1のように
インターネット上ではおろか

286
00:13:30,390 --> 00:13:31,598
実際にそのページを訪問することができます。

287
00:13:31,598 --> 00:13:33,820
だから、今日、私たちのようにする必要があり
別の要素を紹介します。

288
00:13:33,820 --> 00:13:36,720
>> そして、これを行うには、私はするつもりです
先に行くと、クラウド9を開きます。

289
00:13:36,720 --> 00:13:40,090
だからクラウド9は、Aコースであります
クラウドベースのservice-- CS50

290
00:13:40,090 --> 00:13:44,890
私達のワークスペースのすべてを持っていますIDE--
インターネット上のどこかに実行されています。

291
00:13:44,890 --> 00:13:48,330
そして、それは私たちのファイルのすべてを意味します
すでに公的にアクセス可能です。

292
00:13:48,330 --> 00:13:49,830
それでは、先に行くと、これをやらせます。

293
00:13:49,830 --> 00:13:53,670
私は先に行くつもりだと
新しいファイルNCS50IDEを作成します。

294
00:13:53,670 --> 00:13:58,819
以前のように私はそれを保存するつもりです
hello.htmlとして、[保存]をクリックします。

295
00:13:58,819 --> 00:14:01,860
そして今、ちょうど時間を節約するために、私は行きますよ
先に行くと、このコードをコピー＆ペーストします

296
00:14:01,860 --> 00:14:03,470
のではなく、それを再入力します。

297
00:14:03,470 --> 00:14:04,550
そして、それを保存します。

298
00:14:04,550 --> 00:14:07,550
そして今、私は持っています
ファイルがhello.htmlと呼ばれます。

299
00:14:07,550 --> 00:14:09,710
しかし、どのように私は実際に行います
Webページとしてそれを開きますか？

300
00:14:09,710 --> 00:14:14,120
まあ、それはCS50に組み込ま判明します
IDEが打ち鳴らすようなコンパイラであるだけでなく、

301
00:14:14,120 --> 00:14:16,670
GDBのようなデバッガと
他のプログラムの房、

302
00:14:16,670 --> 00:14:21,140
本格的な実際にはあります
CS50、IDE内で実行されているWebサーバ。

303
00:14:21,140 --> 00:14:23,900
>> あなたのすべては、すなわち、
ユーザー独自のWebサーバーを持っています。

304
00:14:23,900 --> 00:14:26,850
そして、Webサーバは単に作品です
その目的は生活の中でのソフトウェアの

305
00:14:26,850 --> 00:14:28,220
Webページを提供することです。

306
00:14:28,220 --> 00:14:32,490
ブラウザからの要求をリッスンし、
少し仮想封筒で応答

307
00:14:32,490 --> 00:14:35,290
その内側にあります
私が書いた内容。

308
00:14:35,290 --> 00:14:38,372
したがって、このWebサーバがあります
実際にフリーでオープンソース。

309
00:14:38,372 --> 00:14:40,830
どこにオープンソースだけの意味
他の誰かが持っているソフトウェア

310
00:14:40,830 --> 00:14:43,480
私たちのすべてのことができていることを書かれて
実際に見るとでもダウンロードして、

311
00:14:43,480 --> 00:14:44,780
ソースコードを変更します。

312
00:14:44,780 --> 00:14:46,150
そして、それは、Apacheと呼ばれています。

313
00:14:46,150 --> 00:14:51,450
>> そして、私たちはすることが少し楽に作りました
Apacheの50を呼び出すことによって、CS50IDEに使用します。

314
00:14:51,450 --> 00:14:53,780
実際にできるように
次のことを理解しています。

315
00:14:53,780 --> 00:14:56,560
私は、Apache 50スタートを言うつもりです。

316
00:14:56,560 --> 00:14:58,910
そして私はちょうどドットを言うつもりです。

317
00:14:58,910 --> 00:15:01,080
そして、我々はややいくつかを見ます
言って不可解なメッセージ

318
00:15:01,080 --> 00:15:04,640
Apacheのドキュメント[設定？グループ？]
ホームには、Ubuntu、それが何であれ、

319
00:15:04,640 --> 00:15:05,770
ワークスペースを大幅に削減します。

320
00:15:05,770 --> 00:15:08,280
Webサーバの起動
正常にApacheの2。

321
00:15:08,280 --> 00:15:11,330
>> だから、長い話を短く、私は
ただボタンをプッシュしています

322
00:15:11,330 --> 00:15:18,000
そして今のWebサーバーをオン
TCPポート上のインターネット上でリスニング

323
00:15:18,000 --> 00:15:20,587
特定のアドレスに80。

324
00:15:20,587 --> 00:15:22,420
そしてそれはここに言うと、
これは、ベースが変更されます

325
00:15:22,420 --> 00:15:26,550
あなたのユーザー名およびその他の要因に、
私はこれをクリックした場合しかし、今気付きます

326
00:15:26,550 --> 00:15:30,211
IDE50ドットjharvardなどと
そう、そのすべてのこの時間に気付きます

327
00:15:30,211 --> 00:15:31,960
過去数のために
週間、あなたが持っている可能性があります

328
00:15:31,960 --> 00:15:35,200
独自のユーザー名ことに気づきました
右上に埋設されています

329
00:15:35,200 --> 00:15:37,130
CS50IDEのコーナー。

330
00:15:37,130 --> 00:15:41,050
>> そして、実際にこのすべてされていること
時間のことができますのアドレス

331
00:15:41,050 --> 00:15:43,574
Web経由ですべてのファイルをご覧ください。

332
00:15:43,574 --> 00:15:45,990
今まで、それは重要だっていません、
一般的にC言語で、あなたのため

333
00:15:45,990 --> 00:15:48,073
で実行されている事が必要
ターミナルではなく、ウェブ上。

334
00:15:48,073 --> 00:15:50,800
しかし、今日、私たちは開始します
ウェブベースのコードを書きます

335
00:15:50,800 --> 00:15:53,350
我々はしたいん
パブリックURLでアクセスできます。

336
00:15:53,350 --> 00:15:56,100
だから、私はするつもりです
行うには、次のURLをクリックです。

337
00:15:56,100 --> 00:16:00,880
>> そして、私はかなり見ているに気づきます
醜いインデックス、ディレクトリのリスト、

338
00:16:00,880 --> 00:16:04,090
しかし、どのようなファイルは、おそらくあなたに飛び出し？

339
00:16:04,090 --> 00:16:05,210
Hello.html。

340
00:16:05,210 --> 00:16:07,870
私が保存されているためです
私のワークスペース内のファイル。

341
00:16:07,870 --> 00:16:12,310
そして、何私は、WebサーバのApacheを指示しました
Davidのワークスペースディレクトリに見ています。

342
00:16:12,310 --> 00:16:15,300
そして、中に誰を聞かせて
世界はこれらのファイルを参照してください。

343
00:16:15,300 --> 00:16:19,050
>> そして実際、今、私の場合
hello.htmlをクリックして、

344
00:16:19,050 --> 00:16:22,180
私は、このタブ内に正確にそのファイルを参照してください。

345
00:16:22,180 --> 00:16:26,430
今、クラウド9のやって気付きます
私たちのために少し役立つ何か。

346
00:16:26,430 --> 00:16:29,480
CS50 IDE内では、あります注意してください
突然アドレスバー。

347
00:16:29,480 --> 00:16:33,690
私たちがしているにもかかわらずだからです
CS50IDEを訪問するChromeを使用して、

348
00:16:33,690 --> 00:16:37,940
CS50IDEの内部には、独自のです
今、Webブラウザのバージョン。

349
00:16:37,940 --> 00:16:40,820
そしてそうではなく、
以下のようなものを複雑に、

350
00:16:40,820 --> 00:16:42,955
私は先に行くつもりです
そしてちょうどこのURLをコピーしてください。

351
00:16:42,955 --> 00:16:45,330
私は先に、ちょうど行くつもりです
自分のChromeウィンドウを開きます。

352
00:16:45,330 --> 00:16:47,800
だからここに魔法、ノーCS50IDEはありません。

353
00:16:47,800 --> 00:16:51,800
私は文字通り貼り付けるつもりです
私のJハーバードURLと入力し、Enterを押します。

354
00:16:51,800 --> 00:16:54,750
出来上がり、今私と
理論的には、誰も

355
00:16:54,750 --> 00:16:57,700
インターネット上で、私は設定した場合
適切なアクセス許可、

356
00:16:57,700 --> 00:16:58,720
このファイルを訪問することができます。

357
00:16:58,720 --> 00:17:03,230
そして今、私が言っている場合
hello.html、ほら、そこに

358
00:17:03,230 --> 00:17:06,366
私の信じられないほどがっかりウェブページです。

359
00:17:06,366 --> 00:17:07,740
それでは、迅速な健全性チェックを実行してみましょう。

360
00:17:07,740 --> 00:17:09,710
そのすべてのため
概念的なセットアップです。

361
00:17:09,710 --> 00:17:13,180
そして、私たちは本当に実際にはいませんでした
どのようにHTML自体を記述する方法を教えました。

362
00:17:13,180 --> 00:17:16,084
ご質問、これまで
ちょうど起こったものに？

363
00:17:16,084 --> 00:17:18,549

364
00:17:18,549 --> 00:17:19,049
はい。

365
00:17:19,049 --> 00:17:24,290

366
00:17:24,290 --> 00:17:25,800
CS50は、これらのウェブページを所有していますか？

367
00:17:25,800 --> 00:17:26,460
どんな意味で？

368
00:17:26,460 --> 00:17:28,947

369
00:17:28,947 --> 00:17:29,530
良い質問。

370
00:17:29,530 --> 00:17:32,429
だからCS50のはCS50.io.を所有しています

371
00:17:32,429 --> 00:17:33,970
我々は確かにそのドメイン名を買ってきました。

372
00:17:33,970 --> 00:17:37,240
そして君たちの性質上、
CS50IDEにログイン、

373
00:17:37,240 --> 00:17:39,270
あなたはすべてのサブドメインと呼ばれるものを得ます。

374
00:17:39,270 --> 00:17:46,840
>> だからマランIDE50-、またはIDE50-Rob.CS50.io、
それはあなたの内で固有のアドレスです

375
00:17:46,840 --> 00:17:47,730
私たちのドメイン名。

376
00:17:47,730 --> 00:17:50,850
そう当然の目的のために、
あなたはあなた自身のユニークなアドレスを持っています。

377
00:17:50,850 --> 00:17:55,150
しかし、我々はによって物事を単純化してきました
トップレベルドメイン、CS50ドットを購入

378
00:17:55,150 --> 00:17:58,050
I / Oと、その後他の人です
その内、いわば。

379
00:17:58,050 --> 00:17:59,890
そして、我々はそれに戻ってきます
おそらく数週間で、

380
00:17:59,890 --> 00:18:01,930
特に最終的なプロジェクトで
あなたの時間、ときにいくつかの

381
00:18:01,930 --> 00:18:03,596
独自のドメイン名を取得したい場合があります。

382
00:18:03,596 --> 00:18:06,270
比較的実際です
単純明快。

383
00:18:06,270 --> 00:18:06,770
大丈夫。

384
00:18:06,770 --> 00:18:07,880
それでは、今、これを実行してみましょう。

385
00:18:07,880 --> 00:18:11,910
私はに戻って行くつもりです
CS50IDE、どこに私のファイルを今、

386
00:18:11,910 --> 00:18:14,710
hello.html、すべてのこと興味深いものではありません。

387
00:18:14,710 --> 00:18:17,130
私が何かをしたいと思います
それよりも少しよりよいです。

388
00:18:17,130 --> 00:18:19,440
だから私はこのような何かをするつもりです。

389
00:18:19,440 --> 00:18:21,510
オープンparagraphs.html私をしてみましょう。

390
00:18:21,510 --> 00:18:23,560
だから、これは私が事前に書いたファイルです。

391
00:18:23,560 --> 00:18:26,480
その上で、のような
いつも、私たちはコメントしています。

392
00:18:26,480 --> 00:18:28,730
しかし、HTMLのコメント
少し違って見えます。

393
00:18:28,730 --> 00:18:33,270
ライン3とライン14で、あなた
コメントを開始するための構文を参照してください。

394
00:18:33,270 --> 00:18:34,020
コメントを終了します。

395
00:18:34,020 --> 00:18:36,820
>> しかし、原料のどれもで
機能的に問題の間。

396
00:18:36,820 --> 00:18:40,250
それはちょうどノートです
ここで何が起こっているのか人間。

397
00:18:40,250 --> 00:18:43,040
そして、ちょうど迅速な健全性など
私は下にスクロールすると、チェックし、

398
00:18:43,040 --> 00:18:46,820
明白な新しいは何ですか
我々が導入しましタグ？

399
00:18:46,820 --> 00:18:52,130
これまで私たちが見てきたので、タグが開かれています
ブラケットHTML、ヘッド、タイトル、ボディ。

400
00:18:52,130 --> 00:18:54,400
しかし、今、明らかに新しい何ですか？

401
00:18:54,400 --> 00:18:55,200
>> うん、そうP。

402
00:18:55,200 --> 00:18:57,320
pタグまたは段落タグ。

403
00:18:57,320 --> 00:19:01,182
そして、私はいくつかのデフォルトを借り
ラテン語のテキストは、私の段落を構成しています。

404
00:19:01,182 --> 00:19:03,390
私が欲しかったものため、
実証どのようにあなたがかもしれないです

405
00:19:03,390 --> 00:19:05,859
HTMLでテキストの段落を表します。

406
00:19:05,859 --> 00:19:08,400
だから何が起こることを始めています
ここに既にあるということです

407
00:19:08,400 --> 00:19:09,657
パターン展開。

408
00:19:09,657 --> 00:19:10,990
そして、私が先に行くと、これを実行してみましょう。

409
00:19:10,990 --> 00:19:12,760
私が最初にApacheをオフにしてみましょう。

410
00:19:12,760 --> 00:19:17,340
そして、私は自分自身を起動するためにそれを伝えるつもりです
再び今日の源7の内部

411
00:19:17,340 --> 00:19:18,420
Mディレクトリ。

412
00:19:18,420 --> 00:19:20,100
私はすべてにアクセスできるように。

413
00:19:20,100 --> 00:19:22,230
>> そして今、私はに戻った場合
このディレクトリのリスト、

414
00:19:22,230 --> 00:19:24,846
私は今日からすべてのファイルを参照してください注意してください。

415
00:19:24,846 --> 00:19:26,720
そして、あなたはで表示されます
次の問題が設定され、我々はよ

416
00:19:26,720 --> 00:19:28,594
あなたに指示を与えます
まさにこれを行うため。

417
00:19:28,594 --> 00:19:35,210
私はparagraphs.html開くと、これがかもしれません
だけでなく、プログラミング言語のように見えます

418
00:19:35,210 --> 00:19:36,970
あなたにあなたはラテン語を話すか読んでいない場合。

419
00:19:36,970 --> 00:19:40,525
しかし、これはわずか3パラグラフです
HTMLでマークアップされたテキストの。

420
00:19:40,525 --> 00:19:43,100
>> そして段落に気付きます
それらの間の休憩。

421
00:19:43,100 --> 00:19:46,400
それが判明ので、
とにも関わらず

422
00:19:46,400 --> 00:19:49,210
これを行うために傾斜するかもしれません、
現実の世界でのに対し、

423
00:19:49,210 --> 00:19:51,370
あなたが行を挿入したい場合は
物事の間の休憩、

424
00:19:51,370 --> 00:19:55,680
あなたは非常に単純かもしれません
これを行うと、保存を押してください。

425
00:19:55,680 --> 00:19:59,460
そして今、私はここでリロードする場合は、通知
そのすべてがちょうど一緒にぼかし

426
00:19:59,460 --> 00:20:01,100
テキストのひとつブロブインチ

427
00:20:01,100 --> 00:20:03,570
HTMLはダム言語の一種であるので。

428
00:20:03,570 --> 00:20:07,230
>> このような中で使用されるように意図されています
道ブラウザのみとなり、その

429
00:20:07,230 --> 00:20:09,920
明示的にあなたがすることを教え何をすべきか。

430
00:20:09,920 --> 00:20:12,890
だから、あなたがそれを教えていない場合
私に新しい段落を与え、

431
00:20:12,890 --> 00:20:14,569
あなたは新しい段落を参照するつもりはありません。

432
00:20:14,569 --> 00:20:16,360
そして、実際には、どのような
ブラウザは何をするだろう

433
00:20:16,360 --> 00:20:20,020
あなたが入力してEnterキーを押した場合でもあり、
のは、何度も何度も言わせて

434
00:20:20,020 --> 00:20:23,190
そして再び、このテキストの道を移動します
画面上にダウンしてから保存します

435
00:20:23,190 --> 00:20:26,610
そしてその後、ブラウザが起こっているリロード
その空白をすべて崩壊します

436
00:20:26,610 --> 00:20:29,021
1つだけ、目に見える空白に。

437
00:20:29,021 --> 00:20:29,520
大丈夫。

438
00:20:29,520 --> 00:20:30,869
だから、段落タグです。

439
00:20:30,869 --> 00:20:32,910
だからパターンは何ですか
それは、ここで開発していますか？

440
00:20:32,910 --> 00:20:37,450
まあ、それはケースのように思われます
HTMLは、すべてのタグの開始についてです

441
00:20:37,450 --> 00:20:38,460
タグを終了します。

442
00:20:38,460 --> 00:20:39,300
そして、タグは何ですか？

443
00:20:39,300 --> 00:20:41,160
まあ、それは構文だけの塊です。

444
00:20:41,160 --> 00:20:44,400
オープンブラケット、キーワード、
閉じ括弧は、タグです。

445
00:20:44,400 --> 00:20:45,510
またはタグを開始します。

446
00:20:45,510 --> 00:20:48,590
そして、あなたがいるとき
自分自身を表現行われ、

447
00:20:48,590 --> 00:20:52,300
あなたのように段落で行われています、
あなたは反対のことを話すことを行ってください。

448
00:20:52,300 --> 00:20:55,480
しかし、逆はかなり後方ではありません。

449
00:20:55,480 --> 00:21:00,630
>> あなたは、単に同じタグの接頭辞
このようなスラッシュで名前を付けます。

450
00:21:00,630 --> 00:21:01,130
大丈夫。

451
00:21:01,130 --> 00:21:02,570
だから、すべてが刺激的ではありません。

452
00:21:02,570 --> 00:21:05,270
そして、実際には、我々が行っていません
ウェブすべてのより興味深いです。

453
00:21:05,270 --> 00:21:07,630
私がしたい場合は
大きく、大胆なもの？

454
00:21:07,630 --> 00:21:11,780
だから、ここでの例だということが判明
headings.htmlで、どこで私の体で、

455
00:21:11,780 --> 00:21:17,280
私は、H1タグ、H2、H3を持っています
4つ、5つ、または6、それらのすべて

456
00:21:17,280 --> 00:21:18,310
かなり難解なようです。

457
00:21:18,310 --> 00:21:21,010
しかし、私はこれを開く行けば
たとえば、のは見てみましょう。

458
00:21:21,010 --> 00:21:22,490
Headings.html。

459
00:21:22,490 --> 00:21:27,030
>> だから、デフォルトでブラウザを使用すると、テキストを与えることができます
それは大きく、本質的に異なるサイズの大胆です。

460
00:21:27,030 --> 00:21:28,070
H1は大きいです。

461
00:21:28,070 --> 00:21:31,240
H6が小さく、その後で
その間に他のすべて。

462
00:21:31,240 --> 00:21:34,170
だから面白いのですが、それでも
本当に私が知っているウェブ。

463
00:21:34,170 --> 00:21:36,870
私たちがしたい場合、私は何を持っています
リストのようなもの。 。

464
00:21:36,870 --> 00:21:40,190
だからここの箇条書きリストです
ハーバード大学の住宅の3。

465
00:21:40,190 --> 00:21:41,600
>> どのようにこのことについてでしたか？

466
00:21:41,600 --> 00:21:45,410
まあ、するlist.htmlを見てみましょう。

467
00:21:45,410 --> 00:21:47,870
そしてここで、我々が表示さ
funkinessの少し

468
00:21:47,870 --> 00:21:49,630
しかし、それでは、何が起こっているのか考えてみましょう。

469
00:21:49,630 --> 00:21:56,182
だから、あなたがちょうど見たものに基づいて、
ULは順不同リストの略です。

470
00:21:56,182 --> 00:21:57,640
順序なしリストは、単に箇条書きを意味します。

471
00:21:57,640 --> 00:21:58,431
何の数字はありません。

472
00:21:58,431 --> 00:22:01,850
ANと呼ばれるものもあります
タグでOLであるリストを命じました。

473
00:22:01,850 --> 00:22:05,350
そして、LI、リスト項目は、それが意味するすべてです。

474
00:22:05,350 --> 00:22:07,790
>> そしてそれを自動的に
数あなたのためにすべてを。

475
00:22:07,790 --> 00:22:11,270
しかし、私のインデントの場合も、すべて
空白はちょうど私のためです。

476
00:22:11,270 --> 00:22:13,050
ブラウザではありません
実際に気になるだろう。

477
00:22:13,050 --> 00:22:16,670
だからにもかかわらず、あなたはできませんでした
これは、単に明確にするために行います、

478
00:22:16,670 --> 00:22:19,880
あなたもいけないけれども
ブラウザはまだでしょう

479
00:22:19,880 --> 00:22:22,130
うまくそれを理解することができます。

480
00:22:22,130 --> 00:22:24,590
私は自分でリロードを打ちますよ
ブラウザ、私はリロードをクリックしています

481
00:22:24,590 --> 00:22:26,760
そして変化は起こっていません
まだブラウザため

482
00:22:26,760 --> 00:22:29,550
私はそれが何を教えて正確に何をして。

483
00:22:29,550 --> 00:22:30,050
>> 大丈夫。

484
00:22:30,050 --> 00:22:31,340
これは、すべてのテキストだけです。

485
00:22:31,340 --> 00:22:33,730
今度はもっと面白い何かをしてみましょう。

486
00:22:33,730 --> 00:22:36,660
私は先に行くつもりだと
このHTMLの一部を借ります。

487
00:22:36,660 --> 00:22:40,910
私は先に行くつもりだと
ここで新しいファイルを作成します。

488
00:22:40,910 --> 00:22:43,370
そして、我々はこのrick.htmlと呼ぶことにします。

489
00:22:43,370 --> 00:22:46,190

490
00:22:46,190 --> 00:22:48,916
私たちは不釣り合いに持っています
何かを使用

491
00:22:48,916 --> 00:22:51,290
この中でリックロールと呼ばれます
クラス今年、私は知りません、

492
00:22:51,290 --> 00:22:53,880
それだけで有機的に起こりました。

493
00:22:53,880 --> 00:22:55,397
>> そして今、それが制御不能に持っています。

494
00:22:55,397 --> 00:22:56,730
だから、僕はそれで行くつもりです。

495
00:22:56,730 --> 00:22:59,700
そして、私はGoogleに行けば
画像とリック・アストリー。

496
00:22:59,700 --> 00:23:02,450

497
00:23:02,450 --> 00:23:06,170
私たちは、なぜあなたがわからない場合
これは、ちょうどウィキペディアをよく読んで。

498
00:23:06,170 --> 00:23:11,520
あなたがリンクをクリックしたたびに、
誰かがどこかで笑っれています。

499
00:23:11,520 --> 00:23:14,860
そして、私がahead--そこに行ってみましょう
我々はのはこの画像を見てみましょう、行きます。

500
00:23:14,860 --> 00:23:16,750
>> そこでここでは持っています
Google画像イメージ。

501
00:23:16,750 --> 00:23:19,390
そしてのはこれがあると仮定しましょう
合理的にどこでもインターネット上で。

502
00:23:19,390 --> 00:23:22,570
だから私はそれが私のためにOKだと仮定するつもりです
実際に私のWebページにこれを入れて。

503
00:23:22,570 --> 00:23:24,820
私は先に行くつもりです
および画像のURLをコピーしてください。

504
00:23:24,820 --> 00:23:28,600
そして今、私はクラウドに戻った場合
9、のは、私がここで何ができるかを見てみましょう。

505
00:23:28,600 --> 00:23:30,630
だからここだけのWebページです。

506
00:23:30,630 --> 00:23:39,020
これは（笑）、リック・アストリーあり、
私はすぐに戻って行くつもりです

507
00:23:39,020 --> 00:23:43,510
私のブラウザに、リロード、および興味深いです。

508
00:23:43,510 --> 00:23:44,530
>> リックはどこにありますか？

509
00:23:44,530 --> 00:23:46,050
だから、私が起こったかを見てみましょう。

510
00:23:46,050 --> 00:23:49,114
実は、私はするつもりです
私はそれをしなかったようなふりをします。

511
00:23:49,114 --> 00:23:50,280
[聞こえない]ここで彼を置きます。

512
00:23:50,280 --> 00:23:52,520
私たちはその瞬間に戻ってそれに来ます。

513
00:23:52,520 --> 00:23:54,200
だからここrick.htmlです。

514
00:23:54,200 --> 00:23:56,070
だから、リック・アストリーではありません。

515
00:23:56,070 --> 00:23:59,680
だから、我々はできるが判明
実際にここで彼を追加します。

516
00:23:59,680 --> 00:24:00,830
これはリック・アストリーです。

517
00:24:00,830 --> 00:24:06,680
私は私にそのイメージを与えると言うつもりです
ソースは、私はちょうどコピーしたURLで、これ

518
00:24:06,680 --> 00:24:09,110
明らかに満足しています
誕生日の何かまたは他の。

519
00:24:09,110 --> 00:24:13,280
>> そして今、私はするつもりです
このようなタグを閉じます。

520
00:24:13,280 --> 00:24:15,170
だから、これはスーパーロングラップしています。

521
00:24:15,170 --> 00:24:17,740
しかし、すべて私がしたことに気づきます
オープンブラケット画像が行われ、

522
00:24:17,740 --> 00:24:20,270
この属性を持つソース。

523
00:24:20,270 --> 00:24:21,530
そして、それは本当に長いURLです。

524
00:24:21,530 --> 00:24:23,720
そして、一番最後に、これに気づきます。

525
00:24:23,720 --> 00:24:29,530
なぜ私が行っているスラッシュ角括弧
代わりに、他のすべてのタグのように、

526
00:24:29,530 --> 00:24:33,590
オープンブラケットを持ちます、
IMG、ブラケットを閉じて？

527
00:24:33,590 --> 00:24:37,040
ただでさえ、あなたの場合の推測を取ります
全く馴染みがありません

528
00:24:37,040 --> 00:24:40,410
前のHTMLと。

529
00:24:40,410 --> 00:24:42,710
>> だから、それが閉じ方法です
コマンドが、なぜ

530
00:24:42,710 --> 00:24:45,850
それは本当に直感的でありません
もう少し何かをする意味

531
00:24:45,850 --> 00:24:48,820
近い画像のような冗長な？

532
00:24:48,820 --> 00:24:51,400
うん。

533
00:24:51,400 --> 00:24:52,000
うん。

534
00:24:52,000 --> 00:24:55,620
ただ、意味的に、音痴はありません
イメージを起動し、画像を終了、

535
00:24:55,620 --> 00:24:56,870
それはどちらかありますかそうではありません。

536
00:24:56,870 --> 00:25:00,960
だから、ギャップを残してしても意味がありません
画像の内部何か他のもののために。

537
00:25:00,960 --> 00:25:02,010
あなたはちょうどそれを行うことはできません。

538
00:25:02,010 --> 00:25:03,720
そしてそう構文
一般的にちょうどになります

539
00:25:03,720 --> 00:25:07,910
内部スラッシュを行うには
開始タグまたは開始タグの

540
00:25:07,910 --> 00:25:09,020
[保存]を押します。

541
00:25:09,020 --> 00:25:13,350
>> だから私は今、今、このファイルをリロードする場合
私はここで良いWebページの料理を持っています。

542
00:25:13,350 --> 00:25:15,100
そして、我々は確かに可能性
本当に人を困らせます

543
00:25:15,100 --> 00:25:17,010
代わりに埋め込むことで
YouTubeのリンクなどがあります。

544
00:25:17,010 --> 00:25:19,350
そして、実際には、任意の時間
あなたは、YouTubeに行ってきました

545
00:25:19,350 --> 00:25:22,190
そして、誤って実際に私を聞かせて
リックはここで自分自身をロールバックします。

546
00:25:22,190 --> 00:25:25,770
だから、リックロール。

547
00:25:25,770 --> 00:25:29,592
だからリックroll--私はここに行くつもりです。

548
00:25:29,592 --> 00:25:31,900
>> [音楽再生]

549
00:25:31,900 --> 00:25:33,730
>> [OK]を、一人はそれを好きでした。

550
00:25:33,730 --> 00:25:37,270
あなたのであれば、すべてのこの時間に気付きます
もちろん、あなたを共有リンクをクリックします

551
00:25:37,270 --> 00:25:41,390
そのあなたが実際にできるURLを取得
メールや法医学の画像に埋め込みます

552
00:25:41,390 --> 00:25:43,730
または問題に設定するか、スライドインチ

553
00:25:43,730 --> 00:25:49,055
そして今、私が代わりに埋め込みをクリックした場合、
気づくそのすべてのこの時間、このようなもの

554
00:25:49,055 --> 00:25:49,680
ありました。

555
00:25:49,680 --> 00:25:50,910
私が先に行くと、これをコピーするつもりです。

556
00:25:50,910 --> 00:25:54,000
>> そして、ちょうど私たちは私は、それをよりよく見ることができます
私のテキストエディタに貼り付けしよう。

557
00:25:54,000 --> 00:25:55,860
このことに注意してくださいどのような
YouTubeはあなたを語ってきました。

558
00:25:55,860 --> 00:25:57,693
あなたが訪問するたびに
YouTubeのビデオ、あなたの場合

559
00:25:57,693 --> 00:26:00,410
あなたのビデオを埋め込みたいです
Webページは、単にこれをつかみます。

560
00:26:00,410 --> 00:26:03,350
だから、これはまた別であります
HTMLタグはインラインフレームと呼ばれます。

561
00:26:03,350 --> 00:26:04,590
またはラインフレームインチ

562
00:26:04,590 --> 00:26:08,680
だから、それはあまりにももう少し見えます
すべての他のものよりも複雑。

563
00:26:08,680 --> 00:26:11,950
だから、画像ことが判明
タグと明らかにIFRAMEタグ

564
00:26:11,950 --> 00:26:13,370
属性と呼ばれるものになります。

565
00:26:13,370 --> 00:26:15,710
>> そして、これは別です
HTMLの文法の一部。

566
00:26:15,710 --> 00:26:19,240
タグのに加えて、
名前、オープンブラケットタグ名、

567
00:26:19,240 --> 00:26:23,780
あなたは、タグの動作を制御することができます
属性の全体の束を有することにより

568
00:26:23,780 --> 00:26:24,860
値に等しいです。

569
00:26:24,860 --> 00:26:26,290
属性が値に等しいです。

570
00:26:26,290 --> 00:26:28,100
だから例えば、
YouTubeは私たちに語っています

571
00:26:28,100 --> 00:26:31,990
あなたはこのビデオの幅が必要な場合
420ピクセル、高さに

572
00:26:31,990 --> 00:26:35,470
315ピクセルに、それはです
どのようにHTMLでそれを表現します。

573
00:26:35,470 --> 00:26:38,480
>> ビデオのソースが起こっています
その長いYouTubeのURLにします

574
00:26:38,480 --> 00:26:40,830
して、いくつかの他のもの
枠線のように、ゼロであります

575
00:26:40,830 --> 00:26:43,500
おそらくありますことを意味するように
事の周りに境界線はありません。

576
00:26:43,500 --> 00:26:45,450
おそらく、フルスクリーンを許可します
ユーザーことを意味

577
00:26:45,450 --> 00:26:47,840
ボタンをクリックすると、
実際にフルスクリーンビデオ。

578
00:26:47,840 --> 00:26:52,870
だから私は本当にになりたい場合
リック・ドットHTMLでここで印象的な、

579
00:26:52,870 --> 00:26:58,490
ではなく、イメージタグを使用してみましょう
私はそれを削除し、代わりにこれを貼り付けます。

580
00:26:58,490 --> 00:27:00,810
そして今、リロード。

581
00:27:00,810 --> 00:27:02,500
そして今、ここで我々は再び行きます。

582
00:27:02,500 --> 00:27:04,979

583
00:27:04,979 --> 00:27:06,020
すべての権利、それは十分です。

584
00:27:06,020 --> 00:27:08,970
すべての権利、私がしようとしますので、
ハード再びそれをしません。

585
00:27:08,970 --> 00:27:11,400
だからここに持ち帰りのいくつかは何ですか？

586
00:27:11,400 --> 00:27:15,130
これらのウェブページのような醜いように、HTML、
あり、実際にはかなり簡単です。

587
00:27:15,130 --> 00:27:16,467
これは、プログラミング言語ではありません。

588
00:27:16,467 --> 00:27:17,550
これは、機能を持っていません。

589
00:27:17,550 --> 00:27:18,410
これは、ループを持っていません。

590
00:27:18,410 --> 00:27:19,535
これは、条件を持っていません。

591
00:27:19,535 --> 00:27:22,900
それが持っているすべては、何十ものです
異なるタグ、その各々の

592
00:27:22,900 --> 00:27:24,620
ゼロ以上の属性を持っています。

593
00:27:24,620 --> 00:27:27,320
そして、実際には、何を約楽しいです
あなたにダイビングを始めると、HTML

594
00:27:27,320 --> 00:27:29,560
それは非常に自己教えやすいということです。

595
00:27:29,560 --> 00:27:32,880
>> それが取るすべては理解しています
HTMLの一般的なフレームワークの。

596
00:27:32,880 --> 00:27:36,510
タグとは何ですか、属性は何ですか、
あなたが実際にWebページを設定する方法

597
00:27:36,510 --> 00:27:37,250
次のように。

598
00:27:37,250 --> 00:27:40,720
そして、他のすべてが本当に結果であります
オンラインリファレンスで検索します

599
00:27:40,720 --> 00:27:43,080
またはいくつかを実行する方法をグーグル
技術や私たちが見てきたように、

600
00:27:43,080 --> 00:27:45,371
Facebookのソースを見て
コー​​ド、ウェブサイトを見て

601
00:27:45,371 --> 00:27:48,710
あなたがそれを好きなことをすると、ソースコードだと
そこにどのように開発者を理解します

602
00:27:48,710 --> 00:27:50,550
実際に物事を打ち出しました。

603
00:27:50,550 --> 00:27:52,180
>> だから我々は、同様に画像を行うことができます。

604
00:27:52,180 --> 00:27:53,994
そして実際に、我々は一瞬前にそれをやりました。

605
00:27:53,994 --> 00:27:55,410
私が先に行くとあなたをちょうど見せしましょう​​。

606
00:27:55,410 --> 00:27:56,770
ここではいくつかのサンプルコードです。

607
00:27:56,770 --> 00:27:58,380
あなたは気難しい猫を参照してください。

608
00:27:58,380 --> 00:28:00,620
だから、私ができることに注意してください
ここでイメージタグを持っています。

609
00:28:00,620 --> 00:28:02,090
そして、私はそれ以上のコメントを持っています。

610
00:28:02,090 --> 00:28:04,490
私は選択肢を持っています
アクセシビリティのためのテキスト。

611
00:28:04,490 --> 00:28:07,250
画面を使用しますので、誰か
視力の理由のためにリーダー

612
00:28:07,250 --> 00:28:10,172
実際にその後、彼らを持つことができます
スクリーンリーダーは気難しい猫を言います。

613
00:28:10,172 --> 00:28:11,880
彼らはことができない場合ので、
画像を参照してください、彼ら

614
00:28:11,880 --> 00:28:14,504
少なくとも自分のコンピュータを持つことができます
それが何であるかを口頭でそれらを教えてください。

615
00:28:14,504 --> 00:28:18,020
そして、そのファイルのソースがcat.jpegです。

616
00:28:18,020 --> 00:28:22,472
だから実際には、私が本当にしたい場合
私が持っていることができるもの、賢い取得done--

617
00:28:22,472 --> 00:28:25,680
私は、リック・アストリーに行くことを約束しません
私の代わりに猫のためのgoogleするつもりです。

618
00:28:25,680 --> 00:28:28,290
そして、私はGoogle画像検索に行けば
ここで、我々は仮定します

619
00:28:28,290 --> 00:28:30,040
これは私の猫の絵です。

620
00:28:30,040 --> 00:28:35,070
>> 私はコントロールがクリックさがあると
または右誤って、この上でクリック

621
00:28:35,070 --> 00:28:35,630
不気味。

622
00:28:35,630 --> 00:28:40,320
そしてcat.jpeg私は行きますよ
私のデスクトップに保存します。

623
00:28:40,320 --> 00:28:44,700
私は今、クラウド9に戻りましょう。

624
00:28:44,700 --> 00:28:48,150
そのここで注意してください、私がすることができます
ローカルファイルをアップロードするために行きます。

625
00:28:48,150 --> 00:28:51,530
そして、私はこれをつかむ場合
ファイル、cat.jpeg、予告

626
00:28:51,530 --> 00:28:54,674
私はそれをドラッグすることができることと
クラウド9にドロップします

627
00:28:54,674 --> 00:28:56,090
それがここで私に叫ぶだろう。

628
00:28:56,090 --> 00:28:59,000
>> 我々はすでにたので
あなたcat.jpegファイルを与えられました、

629
00:28:59,000 --> 00:29:01,430
それはに超簡単です
あなたがきた写真をつかみます

630
00:29:01,430 --> 00:29:03,220
Facebookのから取ら
Flickrや状又は

631
00:29:03,220 --> 00:29:05,678
そして実際にそれをドラッグ＆ドロップ
クラウド9にし、それを作ります

632
00:29:05,678 --> 00:29:07,970
あなた自身の個人の一部
Webサイトまたは問題

633
00:29:07,970 --> 00:29:10,442
我々はすぐにわかるよう七、八を設定します。

634
00:29:10,442 --> 00:29:12,150
そして、ときに
最終的にはその猫を訪問し、

635
00:29:12,150 --> 00:29:16,610
私は、同じ猫をダウンロードしたと仮定すると、
そのthat--通知が愛らしいました。

636
00:29:16,610 --> 00:29:19,160
>> あなたが見ることになることです
ここで、この顔のようなもの。

637
00:29:19,160 --> 00:29:21,810
だからファイルが
Webページ内の参照

638
00:29:21,810 --> 00:29:26,050
あなた自身でローカルのいずれかとすることができます
いくつかの他のサーバ上のアカウントまたはリモート

639
00:29:26,050 --> 00:29:29,670
リックの場合と同様に、
少し前アストリー写真。

640
00:29:29,670 --> 00:29:32,990
だからここでは何をelse--
他に我々はここで行うことができますか？

641
00:29:32,990 --> 00:29:34,890
それでは、次のを見てみましょう。

642
00:29:34,890 --> 00:29:36,160
あなたは種類のクールなものを知っていますか？

643
00:29:36,160 --> 00:29:39,330
>> 我々はこれまでに作ってきました
非常に静的なWebページ。

644
00:29:39,330 --> 00:29:41,830
私は次のように物事をスパイスにしたいです。

645
00:29:41,830 --> 00:29:44,344
私は自分の検索エンジンを作りたいです。

646
00:29:44,344 --> 00:29:47,010
そうしてみましょう、検索エンジンを作るために
先に行くと、これをやって起動。

647
00:29:47,010 --> 00:29:52,570
私が先に行くと、作成するつもりです
sea​​rch.htmlのと呼ばれる新しいファイル。

648
00:29:52,570 --> 00:29:54,890
そして、私たちはオンライン版をprefabedています。

649
00:29:54,890 --> 00:29:56,027
おっと。

650
00:29:56,027 --> 00:29:57,610
端末ウィンドウに貼り付けないでください。

651
00:29:57,610 --> 00:29:58,744
オンラインプレハブバージョン。

652
00:29:58,744 --> 00:30:00,160
そして、私は次のように開始するつもりです。

653
00:30:00,160 --> 00:30:04,490
だからここの始まりです
sea​​rch.htmlのと呼ばれるファイル。

654
00:30:04,490 --> 00:30:07,510
私はそれを保存するつもりです
今日のソースディレクトリ。

655
00:30:07,510 --> 00:30:09,079
私は、この検索を呼ぶつもりです。

656
00:30:09,079 --> 00:30:10,370
実は、私たちはそれを改善するでしょう。

657
00:30:10,370 --> 00:30:13,600
CS50の検索と、実際にはそれをブランド。

658
00:30:13,600 --> 00:30:17,500
そして今、私が言おうとしています
H1 CS50検索のようなもの。

659
00:30:17,500 --> 00:30:20,930
そしてここに至るまで、H2はすぐに来ます。

660
00:30:20,930 --> 00:30:23,230
そして、ちょうど要約に、H1および
H2は何それぞれ意味ですか？

661
00:30:23,230 --> 00:30:26,750

662
00:30:26,750 --> 00:30:30,320
>> うん、そう大きくて大胆な、と
同じ大きさ、それでも大胆ではありません。

663
00:30:30,320 --> 00:30:37,375
だから私はこれを保存し、こっちに行けば、
それでは、ファイルsearch.htmlのを見てみましょう。

664
00:30:37,375 --> 00:30:42,560
すべての権利、およびこの1
[聞こえない] right--です。

665
00:30:42,560 --> 00:30:46,980

666
00:30:46,980 --> 00:30:49,110
待機する。

667
00:30:49,110 --> 00:30:49,945
ダビデは混乱しています。

668
00:30:49,945 --> 00:30:52,610

669
00:30:52,610 --> 00:30:54,080
ああ、それはすぐそこです。

670
00:30:54,080 --> 00:30:54,860
ダビデは馬鹿です。

671
00:30:54,860 --> 00:30:55,420
OK。

672
00:30:55,420 --> 00:30:56,660
だから、それはあります。

673
00:30:56,660 --> 00:30:58,350
だからCS50検索はすぐに来ます。

674
00:30:58,350 --> 00:31:00,370
だから今、の合成ましょう
我々は先週やりました。

675
00:31:00,370 --> 00:31:03,400
>> 我々は話をどこについて
HTTPの下位レベルの力学。

676
00:31:03,400 --> 00:31:05,780
そして、これらの新しいアイデア
ちょうどあるHTMLの

677
00:31:05,780 --> 00:31:08,890
あなたこのマークアップ言語
正確に何を行うには、ブラウザに伝えます

678
00:31:08,890 --> 00:31:10,740
私たちの独自の検索エンジンを実装しています。

679
00:31:10,740 --> 00:31:12,520
だからだけではなく
私は、すぐに来ていると言って

680
00:31:12,520 --> 00:31:14,810
紹介しよう
何かがformタグと呼ばれます。

681
00:31:14,810 --> 00:31:19,610
そして、この形式では、私はするつもりです
入力フィールドのようなものを持っています。

682
00:31:19,610 --> 00:31:22,450
>> そして、この入力の名前
フィールドが、私はそれを呼び出すつもりだQ.

683
00:31:22,450 --> 00:31:26,240
そして、この入力フィールドの種類
私は「テキスト」であると言うつもりです。

684
00:31:26,240 --> 00:31:29,130
テキストフ​​ィールドと、として、我々はよ
参照、単なるテキストボックスです。

685
00:31:29,130 --> 00:31:32,830
そしてそれは、持っているためにここに感知しません
この時点でその中の何でも。

686
00:31:32,830 --> 00:31:35,320
そして、私は単純に行きますよ
それにタグを閉じます

687
00:31:35,320 --> 00:31:38,099
forwardタグ自体に右スラッシュ。

688
00:31:38,099 --> 00:31:39,890
そして私はするつもりです
一つの他の入力を持っています。

689
00:31:39,890 --> 00:31:43,480
入力タイプは提出等しいです。

690
00:31:43,480 --> 00:31:45,320
そして私はするつもりです
あまりにもこの1を閉じます。

691
00:31:45,320 --> 00:31:46,840
>> そして今、私はここに戻って行くつもりです。

692
00:31:46,840 --> 00:31:49,520
そして、すでに我々が表示され、
かなり醜いとはいえ、私はしました

693
00:31:49,520 --> 00:31:52,460
の始まりを持って
ここに私自身の検索ページ。

694
00:31:52,460 --> 00:31:55,150
実際に、私がしてみましょう
少しこれをクリーンアップします。

695
00:31:55,150 --> 00:31:57,330
それは上のが判明
ここで入力、私が持つことができます

696
00:31:57,330 --> 00:31:59,910
プレースホルダと呼ばれる別の属性。

697
00:31:59,910 --> 00:32:05,165
そして、私はキーワードのようなものが表示される場合があり、
またはより具体的には、Qを照会します。

698
00:32:05,165 --> 00:32:07,820
>> そして今、私が持っている、気づきます
灰色のテキストのこの種

699
00:32:07,820 --> 00:32:10,440
それはのように消えます
すぐに私は入力を始めると、

700
00:32:10,440 --> 00:32:12,930
しかし、それはおそらく何か
あなたは他のウェブページで見てきました。

701
00:32:12,930 --> 00:32:14,650
私は実際に送信]ボタンが好きではありません。

702
00:32:14,650 --> 00:32:18,320
だから私は実際に与えるつもりです
ボタンを検索の値を提出してください。

703
00:32:18,320 --> 00:32:21,680
そして今、私はリロードすれば、ことがわかり
私のボタンは、名前の検索になります。

704
00:32:21,680 --> 00:32:24,140
あなたが知っている、私は本当にしないでください
ここにロゴなどがあります。

705
00:32:24,140 --> 00:32:27,140
だから、Googleのフォントジェネレータ。

706
00:32:27,140 --> 00:32:28,820
>> 私はこれをさらに盛り上げるたいです。

707
00:32:28,820 --> 00:32:30,660
だからCS50検索。

708
00:32:30,660 --> 00:32:31,870
私は私自身のロゴを作成してみましょう。

709
00:32:31,870 --> 00:32:33,080
それは良さそうに見えます。

710
00:32:33,080 --> 00:32:36,945
だから今私はこれが来るas--保存してみましょう。

711
00:32:36,945 --> 00:32:40,710

712
00:32:40,710 --> 00:32:43,120
それはどこに行くのですか？

713
00:32:43,120 --> 00:32:43,620
そこ。

714
00:32:43,620 --> 00:32:44,160
OK。

715
00:32:44,160 --> 00:32:44,980
それを逃しました。

716
00:32:44,980 --> 00:32:47,740
保存します。

717
00:32:47,740 --> 00:32:49,470
愚かなブラウザ。

718
00:32:49,470 --> 00:32:51,700
スタンバイ、我々はするつもりです
一度、すべてのためにこれを修正します。

719
00:32:51,700 --> 00:32:57,650

720
00:32:57,650 --> 00:32:58,590
そうしよう。

721
00:32:58,590 --> 00:32:59,090
大丈夫。

722
00:32:59,090 --> 00:32:59,600
ごめんなさい。

723
00:32:59,600 --> 00:33:00,750
休みの日。

724
00:33:00,750 --> 00:33:02,310
さて、これはファンキーです。

725
00:33:02,310 --> 00:33:03,160
フルスクリーンを終了します。

726
00:33:03,160 --> 00:33:04,150
大丈夫。

727
00:33:04,150 --> 00:33:06,870
>> さて、通常のように
人物、として画像を保存します。

728
00:33:06,870 --> 00:33:08,810
logo.gifを。

729
00:33:08,810 --> 00:33:13,194
今私はCS50IDEに行くつもりだし、
私は単純にロゴをつかむつもりです、

730
00:33:13,194 --> 00:33:15,360
私はにそれをドラッグするつもりです
私のソース7ディレクトリ、

731
00:33:15,360 --> 00:33:17,002
ファイルがすでに存在している、私はそれでOKです。

732
00:33:17,002 --> 00:33:19,210
だから私はそれを上書きするつもりです
私はすでにそれを持っていたので。

733
00:33:19,210 --> 00:33:20,630
そして今、どのように私はこれを取り除くのですか？

734
00:33:20,630 --> 00:33:24,670
>> それでは、ここで先に行くと、やってみましょう
画像ソースはlogo.gifを等しくなります。

735
00:33:24,670 --> 00:33:25,490
これを閉じます。

736
00:33:25,490 --> 00:33:26,050
セーブ。

737
00:33:26,050 --> 00:33:30,560
そして今、私は私の検索に戻る場合
ページには、今ではかなり良い見ています。

738
00:33:30,560 --> 00:33:33,610
すべての権利、それはない持つように
非常に便利な何もして。

739
00:33:33,610 --> 00:33:37,000
実際に、私は検索してみましょう
猫のために何が起こるかを参照してください。

740
00:33:37,000 --> 00:33:38,890
猫。

741
00:33:38,890 --> 00:33:39,420
畜生。

742
00:33:39,420 --> 00:33:41,400
それはちょうど明らかに、動作しません。

743
00:33:41,400 --> 00:33:43,760
だから、重要な部分は何ですか
それがここに欠けていますか？

744
00:33:43,760 --> 00:33:49,100
>> 右、あなたが任意のHTMLを知らなくても、
私は携帯電話の形をマークアップ開始しました

745
00:33:49,100 --> 00:33:54,130
私は、入力を取得するにはどのようにそれを言いました
私はテキストボックスと送信ボタンを与え、

746
00:33:54,130 --> 00:33:55,730
何個は明らかに不足していますか？

747
00:33:55,730 --> 00:33:58,975
私たちが実際に取得したいとし
このことは、正常に動作し。

748
00:33:58,975 --> 00:34:02,420

749
00:34:02,420 --> 00:34:05,360
私たちは何をする必要がありますか？

750
00:34:05,360 --> 00:34:08,860
我々は、バックエンドを実装する必要が
データベースや検索エンジン自体、

751
00:34:08,860 --> 00:34:11,210
それが取ることになるだろう
時間の全体の多く、率直に言って。

752
00:34:11,210 --> 00:34:13,380
>> だから我々は最後の時間何をしたか覚えています。

753
00:34:13,380 --> 00:34:18,230
だから、Googleで何かを検索する場合
あなたは事前に、オフにしています

754
00:34:18,230 --> 00:34:20,355
リコール、インスタント検索。

755
00:34:20,355 --> 00:34:22,230
だから、私はそれをオフにしてみましょう
実際にこのように

756
00:34:22,230 --> 00:34:26,650
古い学校のブラウザのように動作し、
私は今、猫のようなものを検索する場合、

757
00:34:26,650 --> 00:34:28,190
URLがどのように見えるかを思い出してください。

758
00:34:28,190 --> 00:34:29,449
これは非常に不可解です。

759
00:34:29,449 --> 00:34:33,000
しかし、そこに埋め込まれ、
リコールは、スラッシュ検索です。

760
00:34:33,000 --> 00:34:35,100
疑問符qは猫に等しいです。

761
00:34:35,100 --> 00:34:37,760
>> そしてそれは私を与えるように思われます
検索結果の全体の束。

762
00:34:37,760 --> 00:34:39,134
だから、私は何をするつもりだ知っていますか？

763
00:34:39,134 --> 00:34:41,650
私は借りるつもりです
わずか数分のためのGoogle。

764
00:34:41,650 --> 00:34:43,670
私はオーバー行くつもりです
ここで、私は言うつもりです

765
00:34:43,670 --> 00:34:47,850
この作用を形成すること、又は
いわば先、

766
00:34:47,850 --> 00:34:49,330
文字通りグーグルでなければなりません。

767
00:34:49,330 --> 00:34:52,590
そして、この方法は、私が欲しかったです
使用して取得することになるだろう。

768
00:34:52,590 --> 00:34:53,560
>> だから、アクションは何ですか？

769
00:34:53,560 --> 00:34:55,760
アクションは不気味という名前が付けられ、
それはちょうど意味します

770
00:34:55,760 --> 00:34:58,120
誰が処理するために起こっています
このフォームのアクション？

771
00:34:58,120 --> 00:35:00,820
私が検索をクリックすると、
結果は行くべきですか？

772
00:35:00,820 --> 00:35:05,300
そして私は今、私のフォームに戻る場合
ここで、私のWebページをリロードします

773
00:35:05,300 --> 00:35:09,000
そして今、何かを検索
犬のように、今気付きます

774
00:35:09,000 --> 00:35:10,850
私はGoogleに再実装しています。

775
00:35:10,850 --> 00:35:11,350
右？

776
00:35:11,350 --> 00:35:14,141
>> 私は何かを検索する場合
他に、それだけではなく、犬のために働きます、

777
00:35:14,141 --> 00:35:16,400
それはまた、猫のために働きます。

778
00:35:16,400 --> 00:35:21,930
また、CS50のために働きます。

779
00:35:21,930 --> 00:35:24,310
そして、[OK]を、これは単にです
圧倒的な下、そうではありませんか？

780
00:35:24,310 --> 00:35:25,920
すべての権利、それが実際に動作します。

781
00:35:25,920 --> 00:35:27,360
だから、実際に何が起こっているされていますか？

782
00:35:27,360 --> 00:35:31,340
だから私は使用して、私のブラウザを教えてきました
HTMLは、ユーザからの入力を取ります

783
00:35:31,340 --> 00:35:35,810
そして実際にその入力を送ります
リモートサーバにHTTPを使用して。

784
00:35:35,810 --> 00:35:39,120
>> そして、私のブラウザのため
HTTPは、実際、理解します

785
00:35:39,120 --> 00:35:43,500
どのようにURLを作成
私は、私のブラウザでオーバー終わります

786
00:35:43,500 --> 00:35:45,660
何が起こるか気づきます
ときに私は犬を探しました。

787
00:35:45,660 --> 00:35:49,270
私が検索をクリックすると、ことに気づきます
私が意図したとおりにURLが変更

788
00:35:49,270 --> 00:35:52,770
クエリが犬に等しいgoogle.com/search~~Vします。

789
00:35:52,770 --> 00:35:56,020
そして、それはフォームためです
この方法は、取得しているので、知っています、

790
00:35:56,020 --> 00:35:59,560
単にそこにそのURLに追加します。

791
00:35:59,560 --> 00:36:01,730
>> さて、これらのウェブページはまだ醜いです。

792
00:36:01,730 --> 00:36:04,890
それでは、他のものを紹介しましょう
構文の作品たちができるならば、今日。

793
00:36:04,890 --> 00:36:07,640
そして、これは既知のものです
カスケードスタイルシートなど。

794
00:36:07,640 --> 00:36:10,720
だから、私は見てみましょう
ここで、この例とを参照してください。

795
00:36:10,720 --> 00:36:12,380
我々は何が起こっているのか推測することができます。

796
00:36:12,380 --> 00:36:14,520
これはCSS0.htmlです。

797
00:36:14,520 --> 00:36:16,532
そして、これはどこのものです
少し醜い取得します。

798
00:36:16,532 --> 00:36:18,490
残念ながらそのため、
ウェブの世界では、

799
00:36:18,490 --> 00:36:20,920
HTMLだけではすべてを行うことはできません。

800
00:36:20,920 --> 00:36:22,920
だから、あなたがしたい場合は
あなたのWeb​​ページのスタイル設定、

801
00:36:22,920 --> 00:36:28,370
あなたが実際に焦点を当てる必要があります
別の方法で美学。

802
00:36:28,370 --> 00:36:33,090
だからここに、私は私のウェブの体を持っています
これの内部ページは大きなdiv要素です。

803
00:36:33,090 --> 00:36:34,700
そして、divがちょうど部門を意味します。

804
00:36:34,700 --> 00:36:38,060
だから、段落のようだが、それ
同じ意味を持っていません

805
00:36:38,060 --> 00:36:39,180
テキストの段落の。

806
00:36:39,180 --> 00:36:40,940
>> これはただの手段に
ブラウザは、ここに来ます

807
00:36:40,940 --> 00:36:45,210
私のWebの大きな矩形領域
ページには、私は特別にそれを処理します。

808
00:36:45,210 --> 00:36:47,420
そのdiv要素が始まる今、21行です。

809
00:36:47,420 --> 00:36:48,770
そして、ちょうど推測を取ります。

810
00:36:48,770 --> 00:36:53,080
上のライン21の効果は何ですか
ページの内容の残りの部分？

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
それをセンタリング。

813
00:36:56,311 --> 00:36:56,810
それで全部です。

814
00:36:56,810 --> 00:36:58,830
だから我々はの方法を見ていません
実際にテキストをセンタリング。

815
00:36:58,830 --> 00:37:00,996
>> 実際には、私の検索エンジン、
実際のグーグルとは異なり、

816
00:37:00,996 --> 00:37:03,040
すべての左に渡って正当化されました。

817
00:37:03,040 --> 00:37:07,430
そして今ライン21で、私はちょっと、と言っています
ブラウザは、ページの部門を作成します。

818
00:37:07,430 --> 00:37:09,450
ちょうど私は大きな、目に見えない四角形を与えます。

819
00:37:09,450 --> 00:37:11,490
それは私がしたい方法です
Webページを考えてみてください。

820
00:37:11,490 --> 00:37:13,870
次のようにして、それを型にはめます。

821
00:37:13,870 --> 00:37:16,900
これらの引用符の内側には、
今、第二言語です

822
00:37:16,900 --> 00:37:19,969
今日は導入することを
カスケードスタイルシートと呼ばれます。

823
00:37:19,969 --> 00:37:22,010
ありがたいことに、それはあまりにもではありません
プログラミング言語

824
00:37:22,010 --> 00:37:26,470
ので、その構文は非常に限られたですが、
また、非常にその機能に制限

825
00:37:26,470 --> 00:37:30,670
HTMLはすべてに約あるのに対し、
ウェブページのデータをマークアップ

826
00:37:30,670 --> 00:37:32,130
ウェブページの構造。

827
00:37:32,130 --> 00:37:35,320
CSSは一般に約
ラストマイル、美学、

828
00:37:35,320 --> 00:37:40,160
サイズと色となって
Webページで正確に適切な配置。

829
00:37:40,160 --> 00:37:43,000
実際、それが形成されています
キーと値のペアを持ちます。

830
00:37:43,000 --> 00:37:46,290
>> この、テキストなどのプロパティ
コロンに続いて、合わせ、

831
00:37:46,290 --> 00:37:49,720
その値が続きます
この場合には、中心であるプロパティ、。

832
00:37:49,720 --> 00:37:51,910
そして今、あなたに気付きます
巣これらの事をすることができます。

833
00:37:51,910 --> 00:37:56,780
私はその中にすべてのものを望んでいた場合
私は、中央揃えするに強調表示して、

834
00:37:56,780 --> 00:38:00,270
私はライン21を持っている理由ですし、
対応するライン31。

835
00:38:00,270 --> 00:38:04,820
しかし、今ジョンを言いたいと仮定
ハーバード大学は、私のホームページへようこそ。

836
00:38:04,820 --> 00:38:06,530
>> 著作権記号ジョン・ハーバード。

837
00:38:06,530 --> 00:38:09,180
そして、私は最初の必要があるとし
これらの行は、かなり大きなものとなります。

838
00:38:09,180 --> 00:38:10,450
36ピクセル。

839
00:38:10,450 --> 00:38:11,530
だから、まともなサイズです。

840
00:38:11,530 --> 00:38:13,240
そして、私はその重量が太字になりたかったです。

841
00:38:13,240 --> 00:38:15,450
しかし、その下の、
私は、小さいテキストが欲しいです。

842
00:38:15,450 --> 00:38:19,980
そして、その下に、私が欲しいです
さらに小さなテキスト。

843
00:38:19,980 --> 00:38:20,480
ごめんなさい。

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
今日はオフの日のように感じています。

846
00:38:26,940 --> 00:38:29,840
>> だから今、私はこれを表現するために何をやっていますか？

847
00:38:29,840 --> 00:38:34,580
ここではライン22に埋設されています
div要素またはネストされたdiv要素、可能ならば。

848
00:38:34,580 --> 00:38:36,190
それはあまりにも独自のスタイルタグを持っています。

849
00:38:36,190 --> 00:38:38,160
私は36のフォントサイズを指定します。

850
00:38:38,160 --> 00:38:40,460
私は太字のフォントの太さを指定します。

851
00:38:40,460 --> 00:38:43,360
ここでダウン、私は24ピクセルを指定します。

852
00:38:43,360 --> 00:38:45,960
そして最後に、28行目で、私は12を指定します。

853
00:38:45,960 --> 00:38:49,070
だから迅速な健全性チェックなど
これを読んで、人間として、

854
00:38:49,070 --> 00:38:52,545
画面上のどの言葉です
実際に大胆になるだろうか？

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
どの行が実際に大胆がありますか？

857
00:38:58,760 --> 00:38:59,570
>> ちょうどジョン・ハーバード。

858
00:38:59,570 --> 00:39:00,070
右？

859
00:39:00,070 --> 00:39:05,940
22行目はちょっと言うと同じようにあるので
ブラウザは、こちらのページの一部門です。

860
00:39:05,940 --> 00:39:07,920
それはフォントサイズ36ポイントを作ります。

861
00:39:07,920 --> 00:39:09,460
フォントの太さを太字にします。

862
00:39:09,460 --> 00:39:11,920
すぐに達するよう
対応する終了タグ

863
00:39:11,920 --> 00:39:15,340
またはライン24上の閉じタグ、
その手段、ちょっとブラウザ、

864
00:39:15,340 --> 00:39:17,640
それはあなたがやっているであるものは何でもやって停止します。

865
00:39:17,640 --> 00:39:21,020
とにもかかわらず、明確にすることに気付きます
ライン22は、これらの属性のすべてを持っています

866
00:39:21,020 --> 00:39:24,430
スタイルのように、ときに
24行目でタグを閉じて、

867
00:39:24,430 --> 00:39:25,940
あなただけのタグの名前を言及しています。

868
00:39:25,940 --> 00:39:29,990
>> あなたは、単語のスタイルを繰り返さありませんか
これらの引用符の内側だもの。

869
00:39:29,990 --> 00:39:32,860
そして私は今、これを見てそうだとすれば
私のブラウザでは、のは見てみましょう

870
00:39:32,860 --> 00:39:38,060
最終結果を見て。私が行ってみよう
先にCSS 0で、このファイルに。

871
00:39:38,060 --> 00:39:41,814
そしてそれはまだかなり平野です、
しかし、非常に興味深い取得。

872
00:39:41,814 --> 00:39:43,980
しかし、それはそこのが判明
私はここで行うことができます他のもの、

873
00:39:43,980 --> 00:39:46,490
そして作るのリスクのあります
この完全に恐ろしいです、

874
00:39:46,490 --> 00:39:48,630
ここでその中に気づく私の
私のWebページの本体、

875
00:39:48,630 --> 00:39:53,930
私は変な何かを行うことができます
BGや背景色などがあります。

876
00:39:53,930 --> 00:39:56,670
>> そして、迅速、あなたの好きな色は何ですか？

877
00:39:56,670 --> 00:39:57,720
グリーン私は聞きました。

878
00:39:57,720 --> 00:39:58,750
大丈夫。

879
00:39:58,750 --> 00:40:02,920
だから今、私は今、リロードがヒットした場合、
我々は、緑のWebページを持っています。

880
00:40:02,920 --> 00:40:04,710
すべての権利なので、それは悪くはありません。

881
00:40:04,710 --> 00:40:08,350
そして今、私はこれをしたい場合は、本当に
クールな、私は私のテキストの色を作ることができます

882
00:40:08,350 --> 00:40:09,360
でも赤。

883
00:40:09,360 --> 00:40:10,870
それでは、これはどのようなものか見てみましょう。

884
00:40:10,870 --> 00:40:12,230
今ではかなり良い見ています。

885
00:40:12,230 --> 00:40:15,460
そして、ダウンここで、本当にあなたの場合
誰かを台無しにしたいです

886
00:40:15,460 --> 00:40:17,487
または、あなたがなりたい場合
それらの人々の1人

887
00:40:17,487 --> 00:40:20,570
ウェブを訪問にあなたをだまししようとします
ページ彼らがGoogleにだまされてきたので、

888
00:40:20,570 --> 00:40:27,610
思考に全体の束があります
キーワードのリロード、見てみましょうlike--。

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
それはどこに行きましたか？

891
00:40:30,680 --> 00:40:31,530
そして、私たちがそれ。

892
00:40:31,530 --> 00:40:32,030
大丈夫。

893
00:40:32,030 --> 00:40:34,905
だから私はさておき、私たちとわかるようにこれを言います
数週間のうちにこのようなものについての話

894
00:40:34,905 --> 00:40:36,740
我々はについて話すとき
セキュリティ、実際にあなたの場合

895
00:40:36,740 --> 00:40:38,852
埋め込む全体房の
Webページ内のキーワード、

896
00:40:38,852 --> 00:40:41,810
彼らはには見えない方にも
Googleのような人間、誰かは、もちろん、

897
00:40:41,810 --> 00:40:43,250
まだ実際にこれを見つけることができます。

898
00:40:43,250 --> 00:40:45,820
すべての権利、それはかなりですので、
かなり迅速に恐ろしいです。

899
00:40:45,820 --> 00:40:48,420
>> 実際には、すべてではありません
そのくらい自分のウェブとは異なり、

900
00:40:48,420 --> 00:40:51,480
学部としてページ、これは
私は見つけるために周りグーグル開始しました

901
00:40:51,480 --> 00:40:53,690
私の古いウェブサイトの過去のバージョン。

902
00:40:53,690 --> 00:40:54,500
それはかなり悪かったです。

903
00:40:54,500 --> 00:40:56,650
実際に、私は見つけました
ただクラスの前に1。

904
00:40:56,650 --> 00:40:58,620
しかし、そこに悪いことがあります。

905
00:40:58,620 --> 00:41:01,534
これは明らかに私のでした
バック1996年のホームページ。

906
00:41:01,534 --> 00:41:04,200
どうやら私はそれがだと思いました
人々に自分の名前を聞いて、適切な

907
00:41:04,200 --> 00:41:05,991
彼らはことができる前に
実際に私のWebページを参照してください。

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> そして、私はそれらを示しました
愚かな何か、おそらく。

910
00:41:11,920 --> 00:41:13,450
私は次回のためにもっと掘りますよ。

911
00:41:13,450 --> 00:41:16,220
しかし、今のところ、してみましょう
デザインを少し考えてみましょう。

912
00:41:16,220 --> 00:41:17,444
私たちはスタイルについて説明しました。

913
00:41:17,444 --> 00:41:19,735
これまで、このページと
私が書いたほとんどのすべて

914
00:41:19,735 --> 00:41:21,890
文体はかなりきれいです。

915
00:41:21,890 --> 00:41:23,320
しかし、どのようなデザインは？

916
00:41:23,320 --> 00:41:25,990
まあ、多くの冗長性があります
何で私がここでやってきました。

917
00:41:25,990 --> 00:41:28,156
>> 私は言葉を述べました
場所のカップルで色。

918
00:41:28,156 --> 00:41:31,630
私はのカップルでフォントサイズを述べました
場所のカップルでの場所で大胆。

919
00:41:31,630 --> 00:41:34,870
そして、基本的に、私は共同です
二つの言語を混入。

920
00:41:34,870 --> 00:41:38,100
私はタグとしてHTMLを持っている私の
属性と、その後突然、

921
00:41:38,100 --> 00:41:40,100
引用符の間に、私が持っています
第二言語今日

922
00:41:40,100 --> 00:41:43,830
再び、ちょうどこれらと呼ばれるCSS、
キーと値のペア、またはこれらの特性

923
00:41:43,830 --> 00:41:45,280
コロンで区切られました。

924
00:41:45,280 --> 00:41:47,700
>> それは、その多くが判明します
我々C言語のように

925
00:41:47,700 --> 00:41:50,550
取り除くために始めることができます
ヘッダファイルにいくつかのコード、

926
00:41:50,550 --> 00:41:53,520
私たちはHTMLで同じことを行うことができます。

927
00:41:53,520 --> 00:41:56,030
次のようにそして、それに向けてのステップです。

928
00:41:56,030 --> 00:42:02,230
このバージョンは、CSS1.htmlであることに注意してください
構造的にまったく同じウェブページ。

929
00:42:02,230 --> 00:42:05,250
だから私は、全体の束を持っています
div要素が、この時、私はしました

930
00:42:05,250 --> 00:42:07,220
ラッパーの脱却
あなたがわかるようDIV。

931
00:42:07,220 --> 00:42:12,390
>> そして、私はこれらの3つのdivを与えてくれました
上部、中央、下、一意のID。

932
00:42:12,390 --> 00:42:14,760
によるので、これは、いいです
これらの部門を与えます

933
00:42:14,760 --> 00:42:18,715
ページ一意の識別子の、
私は他の場所でそれらを参照することができます。

934
00:42:18,715 --> 00:42:19,215
どこ？

935
00:42:19,215 --> 00:42:21,070
まあ、私が上にスクロールしてみましょう。

936
00:42:21,070 --> 00:42:24,070
そして、これまで、いつでも我々は見てきました
Webページの先頭に、何

937
00:42:24,070 --> 00:42:28,560
私たちが持っていた唯一のタグ
Webページの頭？

938
00:42:28,560 --> 00:42:29,740
少し大きな声で。

939
00:42:29,740 --> 00:42:30,799
これまでのところだけでタイトル。

940
00:42:30,799 --> 00:42:32,590
しかし、それはそこのが判明
いくつか他のもの

941
00:42:32,590 --> 00:42:35,840
あなたは、そこにのいずれかを置くことができます
それがスタイルタグと呼ばれています。

942
00:42:35,840 --> 00:42:37,850
それで先ほど、私たちが見て
style属性で。

943
00:42:37,850 --> 00:42:39,150
スタイルタグがありますが判明。

944
00:42:39,150 --> 00:42:41,200
これは、内部​​の所属します
Webページのヘッド。

945
00:42:41,200 --> 00:42:42,840
そして今、私がやっているものに気づきます。

946
00:42:42,840 --> 00:42:46,540
私はこの内持ちます
スタイルタグの後。

947
00:42:46,540 --> 00:42:51,190
私は、文字通り20行に言及してい
私はスタイル設定するタグの名前。

948
00:42:51,190 --> 00:42:53,489
>> それから私は、オープン中括弧を持っています
そして、中括弧を閉じました。

949
00:42:53,489 --> 00:42:56,030
Cとその精神においては非常に似てますが、
再び、これは、関数ではなく、

950
00:42:56,030 --> 00:42:57,796
これは、ここでは単に構文的な詳細です。

951
00:42:57,796 --> 00:43:00,170
そしてもちろん、私が言っています
ブラウザ、ちょっとブラウザ、

952
00:43:00,170 --> 00:43:05,210
ページの全体の体を作ります
中央のテキストの配置を持っています。

953
00:43:05,210 --> 00:43:06,930
そして、これは以下のように言っています。

954
00:43:06,930 --> 00:43:12,600
ねえブラウザは、HTMLが表示された場合
ページ内の要素またはタグその

955
00:43:12,600 --> 00:43:17,040
上部の一意の識別子を有し、
そう、ハッシュ記号は、ここだけの意味します

956
00:43:17,040 --> 00:43:21,010
トップのユニークなアイデア、先に行きます
そのフォントサイズ36を作ります

957
00:43:21,010 --> 00:43:22,490
大胆かつそのフォントの太さ。

958
00:43:22,490 --> 00:43:26,840
>> ねえ、ブラウザ、その要素
IDが24ピクセルにし、真ん中です。

959
00:43:26,840 --> 00:43:31,070
そして、あなたが表示された場合、ブラウザねえ
下部のアイデアは、それ12ピクセルにします。

960
00:43:31,070 --> 00:43:33,540
最後に効果
正確にSAMがあります。

961
00:43:33,540 --> 00:43:36,500
私はCSSの1に入る場合は、
ページは同じに見えます。

962
00:43:36,500 --> 00:43:39,810
しかし、我々は一歩です
わずかに良いデザイン。

963
00:43:39,810 --> 00:43:44,850
私は今、CSS2にここに戻って行こう
そして私がやった他に何を参照してください。

964
00:43:44,850 --> 00:43:48,030
>> 今のページは本当に、本当にきれいです。

965
00:43:48,030 --> 00:43:50,730
実際に、私はすべてを収めることができます
こちらのページの内容。

966
00:43:50,730 --> 00:43:54,270
しかし、どのような新しいタグ私を持っています
明らかに、導入されましたか？

967
00:43:54,270 --> 00:43:54,770
リンク。

968
00:43:54,770 --> 00:43:57,853
そして、それは、タグの最高の名前ではありません
それはある意味で、リンクではないので

969
00:43:57,853 --> 00:44:00,780
我々はそれを知っているが、このことは、
いくつかの他のファイル内のリンク。

970
00:44:00,780 --> 00:44:02,890
これは、Cに種のようなシャープなどがあります

971
00:44:02,890 --> 00:44:06,280
>> これは、HTMLでの方法です
ちょっとブラウザを言って、

972
00:44:06,280 --> 00:44:10,240
の内容を取りに行きます
ファイルはcss2.cssと呼ばれます。

973
00:44:10,240 --> 00:44:12,880
関係、私には、
それはスタイルシートであるということです。

974
00:44:12,880 --> 00:44:17,980
そして実際、それは何の1
カスケードスタイルシート手段のSさん。

975
00:44:17,980 --> 00:44:20,350
これは、スタイルシートです。

976
00:44:20,350 --> 00:44:23,120
それは含む単なるテキストフ​​ァイルです
プロパティの全体の束。

977
00:44:23,120 --> 00:44:25,940
これは、スタイルの全体の束です
あなたは、ページに適用すること。

978
00:44:25,940 --> 00:44:28,860
>> そして、これは明らかです
第二のファイルを参照します。

979
00:44:28,860 --> 00:44:32,970
そして、私はそれを開いた場合、CSS2.css、
すべて私がやったことに気付きます

980
00:44:32,970 --> 00:44:35,900
すべてをコピーして貼り付けています
このファイルにこれの。

981
00:44:35,900 --> 00:44:38,220
そして今、あなたがきた場合であっても決して
前にこのようなものをコード化され、

982
00:44:38,220 --> 00:44:40,700
ただで検討
ことわざエンジニアリング帽子

983
00:44:40,700 --> 00:44:44,220
なぜこのaは、上
おそらく、よりよい設計？

984
00:44:44,220 --> 00:44:48,910
これらのCSSプロパティを因数分解、
自分のファイルにそれらを置きます。

985
00:44:48,910 --> 00:44:51,330
我々はこれを解決したとしても
5分前のような問題

986
00:44:51,330 --> 00:44:52,600
非常に最初のバージョンです。

987
00:44:52,600 --> 00:44:55,730
>> 我々は改善されていませんでした
文体ページ、

988
00:44:55,730 --> 00:44:57,520
これはちょうど良いです
ある意味でデザイン。

989
00:44:57,520 --> 00:44:58,990
どうして...と思うのですか？

990
00:44:58,990 --> 00:45:01,510
うん。

991
00:45:01,510 --> 00:45:02,260
より柔軟な方法？

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
うん。

994
00:45:05,540 --> 00:45:07,373
どこに行きたいのであれば
背中や状況を変えます、

995
00:45:07,373 --> 00:45:09,540
今、あなたは一つの場所を持っています
どこに物事を変更することができます。

996
00:45:09,540 --> 00:45:11,622
そして、実際には、何かのため
以下のような問題は、7セット

997
00:45:11,622 --> 00:45:13,690
我々は実装します場所
株式取引のウェブサイト、

998
00:45:13,690 --> 00:45:15,523
それが持っているために起こっています
ページの全体の束。

999
00:45:15,523 --> 00:45:17,620
そして、それは本当にだろう
迷惑なあなたが判断した場合、HM、

1000
00:45:17,620 --> 00:45:21,630
私は本当に私が欲しい、24ピクセルを好きではありません
それは28ピクセルまたはわずかに大きいことにします。

1001
00:45:21,630 --> 00:45:23,550
そして、しなければなりません
グローバルな検索と置換

1002
00:45:23,550 --> 00:45:27,560
またはあなたのウェブサイトのすべてのファイルを開きます
単に実際の値を変更します。

1003
00:45:27,560 --> 00:45:31,290
これらのスタイルを因数分解することにより、
一つの中央の場所に、

1004
00:45:31,290 --> 00:45:34,720
あなたは今、1つのテキストフ​​ァイルを開くことができます
CS50IDEで任意のプログラムに、

1005
00:45:34,720 --> 00:45:36,479
それを変更し、それを保存、およびdone。

1006
00:45:36,479 --> 00:45:38,270
あなたはそれらを伝播してきました
どこにでも変化します。

1007
00:45:38,270 --> 00:45:42,450
そして、それは同じです
ドットHファイルでも同様に。

1008
00:45:42,450 --> 00:45:46,697
このようにしてそうご質問
これまでこの構文の？

1009
00:45:46,697 --> 00:45:48,530
すべての権利、私たちはしました
それはそう、すべてを行います

1010
00:45:48,530 --> 00:45:51,170
実際にハイパーリンクを実装除きます。

1011
00:45:51,170 --> 00:45:52,740
そしてそれでは、先に行くと、これをやらせます。

1012
00:45:52,740 --> 00:45:54,830
私は先に行ってみようと
ここで新しいファイルを作成します。

1013
00:45:54,830 --> 00:45:59,970
私はそれを呼び出すつもりです
link.html、今日のコードに入れます。

1014
00:45:59,970 --> 00:46:03,000
>> そして、私はオープンするつもりです
ブラケットドキュメントタイプのHTM​​L。

1015
00:46:03,000 --> 00:46:05,970
さておき、この事として、
トップ、このドキュメント型宣言、

1016
00:46:05,970 --> 00:46:08,420
それは奇妙なだけです
感嘆符を持ちます。

1017
00:46:08,420 --> 00:46:12,100
あなたはそこにそれをしなければならないし、それ
私たちは、HTMLバージョン5を使用していることを意味します。

1018
00:46:12,100 --> 00:46:14,460
古いバージョンの
言語ははるかに長くいました

1019
00:46:14,460 --> 00:46:16,400
あなたがそこに置くために必要な文字列。

1020
00:46:16,400 --> 00:46:18,620
そこでここでは、リンクと呼ばれる例があります。

1021
00:46:18,620 --> 00:46:20,950
>> 私はここで私のWebページの本体が必要です。

1022
00:46:20,950 --> 00:46:29,770
そしてここで、hrefの等号
それでは、HTTP://www.disney.comを言わせて

1023
00:46:29,770 --> 00:46:35,420
私のお気に入りのウェブサイトは、我々は言うでしょう。

1024
00:46:35,420 --> 00:46:38,550
すべての権利なので、非常に
無害な、ユーザーフレンドリーなページ。

1025
00:46:38,550 --> 00:46:42,950
私は今、自分のディレクトリに移動した場合
商品一覧はこちらとlink.htmlを開き、

1026
00:46:42,950 --> 00:46:44,780
私たちは、ハイパーテキストを持っています。

1027
00:46:44,780 --> 00:46:47,410
>> そして実際、これはどこにあります
HTTPでのHはから来ています。

1028
00:46:47,410 --> 00:46:51,580
ハイパーテキスト転送プロトコル
テキストの転送についてです

1029
00:46:51,580 --> 00:46:53,840
それは、他のリソースへのハイパーリンクを持っています。

1030
00:46:53,840 --> 00:46:58,210
そして実際、ここでは、よく知られています
レトロな場合、青色のリンクをクリックした場合に、

1031
00:46:58,210 --> 00:47:02,607
実際Disney.comに私をリードします。

1032
00:47:02,607 --> 00:47:03,940
今、ああ、それはすぐに出て来ています。

1033
00:47:03,940 --> 00:47:08,970
すべての権利、今、何をしているいくつかの
この場合の影響の？

1034
00:47:08,970 --> 00:47:11,610
>> そして率直に言って、世界が開始します
もう少し慣れます

1035
00:47:11,610 --> 00:47:15,090
また、少し怖いです
だけでなく、もう少し

1036
00:47:15,090 --> 00:47:17,840
あなたが始めると自己弁護
これらのことを理解します。

1037
00:47:17,840 --> 00:47:21,610
オッズは、あなたのいくつか、あなたが行く場合であるため、
Gmailの迷惑メールフォルダを介して、あるいは

1038
00:47:21,610 --> 00:47:23,990
あなたの受信トレイ、あなたはおそらくしました
電子メールのいくつかの種類を得て

1039
00:47:23,990 --> 00:47:26,980
それはあなたを変更するように求めています
パスワード多分または多分確認します

1040
00:47:26,980 --> 00:47:28,910
あなたのPayPalのアカウント情報やその他もろもろ。

1041
00:47:28,910 --> 00:47:34,510
>> そして、実際には、あなたが受けている可能性があります
ここにクリックのように述べているもの

1042
00:47:34,510 --> 00:47:42,260
あなたのPayPalパスワードをリセットします。

1043
00:47:42,260 --> 00:47:44,130
そして今、場合には、注意してください
これはDisn​​ey.comではありません

1044
00:47:44,130 --> 00:47:51,600
しかし、のようなbadplace.comと
ここにテキストことに注意して、リロード

1045
00:47:51,600 --> 00:47:53,710
全く何も言うことができます。

1046
00:47:53,710 --> 00:47:55,260
そして実際に、これはただの言葉です。

1047
00:47:55,260 --> 00:48:04,610
なぜ私は実際に超悪質なことはありません
そして、http://www.paypal.comを言います。

1048
00:48:04,610 --> 00:48:14,090
>> こちらをクリックしてあなたのPayPalをリセット
パスワードと今リロード。

1049
00:48:14,090 --> 00:48:16,220
これは右、かなり正当に見えますか？

1050
00:48:16,220 --> 00:48:20,470
私が意味する、私は上をクリックしないであろう
ただこれを言う電子メール。

1051
00:48:20,470 --> 00:48:22,450
しかし、ここで二分法に気づきます。

1052
00:48:22,450 --> 00:48:26,880
それはwww.paypal.com言い、
実際に、ちょっと待って、

1053
00:48:26,880 --> 00:48:29,210
私たちは、あなたがしたいことを知っています
セキュリティのための。

1054
00:48:29,210 --> 00:48:35,450
だから今、www.paypal.com HTTPSに行き、
しかし、あなたは前にこれをやったことがない場合は、

1055
00:48:35,450 --> 00:48:38,182
の習慣を身に取得するのですか
ここで少し、リンクの上にマウスを移動。

1056
00:48:38,182 --> 00:48:39,890
そして、それは見ることが難しいです
そこに、画面上で、

1057
00:48:39,890 --> 00:48:41,340
そして、それはここではないすべてのことに簡単です。

1058
00:48:41,340 --> 00:48:43,615
しかし、方法ダウン、ここで
小さな小さなコーナー

1059
00:48:43,615 --> 00:48:45,740
実際にブラウザを行います
私たちが行っていることを教えてくれ

1060
00:48:45,740 --> 00:48:48,850
Paypal.comの代わりにbadplace.comします。

1061
00:48:48,850 --> 00:48:51,620
さて、ここで我々はこの一緒に行くのですか？

1062
00:48:51,620 --> 00:48:54,859
我々が今日やったすべての例、
我々はハードコーディングされており、手動で入力しました。

1063
00:48:54,859 --> 00:48:56,900
ウェブは、信じられないほどです
興味のないときには、ハード

1064
00:48:56,900 --> 00:48:59,844
そのコンテンツので、あなたのウェブページをコーディング
静的であり、変更することはありません。

1065
00:48:59,844 --> 00:49:01,760
もちろん、私たちのすべての
お気に入りのウェブサイト今日、

1066
00:49:01,760 --> 00:49:04,470
それは、GmailやTwitterのかですか
Facebookや他の任意の数

1067
00:49:04,470 --> 00:49:05,290
動的です。

1068
00:49:05,290 --> 00:49:07,340
彼らは、で変更しています
ユーザ入力に応答し

1069
00:49:07,340 --> 00:49:08,840
ちょうどGoogleの検索結果のように。

1070
00:49:08,840 --> 00:49:12,415
>> だから水曜日に、我々は何をすべきかです
我々は、HTMLやCSSの導入を残します

1071
00:49:12,415 --> 00:49:14,290
我々が取ると、私たちの背後にあります
今、私たちは当然のために

1072
00:49:14,290 --> 00:49:16,640
それを知っていると私たちは紹介
新しいプログラミング言語

1073
00:49:16,640 --> 00:49:19,050
などと呼ばPHP、
Cは、私たちを与えるために起こっています

1074
00:49:19,050 --> 00:49:22,450
実際にプログラムを作成する力
自身が出力を生成すること。

1075
00:49:22,450 --> 00:49:25,900
ここでは、使用しています
PHPは動的にウェブを生成します

1076
00:49:25,900 --> 00:49:27,340
この新しい言語を使用してページ。

1077
00:49:27,340 --> 00:49:28,989
だから、もっとその上で水曜日に。

1078
00:49:28,989 --> 00:49:29,530
あなたを参照してください。

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [音楽再生]

1081
00:49:37,380 --> 00:52:38,864