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 Malan: Това е CS50 и
това е началото на седмица 7.

4
00:00:14,250 --> 00:00:15,060
Така че добре дошъл отново.

5
00:00:15,060 --> 00:00:17,540
И може би си спомняте, че
в проблем зададете четири,

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
Но по-специално, аз исках да
привлека вниманието ви 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
На снимката тук е Ken следващия
Мери в Ню Хейвън.

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
определя четири, която казва, че служителите са
Недопустими за невероятните награди

22
00:01:09,710 --> 00:01:13,130
защото Кен е, разбира се, една от
фотографите на нашия персонал.

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 AM, така че само преди малко,

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.

41
00:02:17,620 --> 00:02:22,690
>> Но в снимки на Бони, тя се превръща
изложени са множество членове на персонала, Sam

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
получава, тези две секции също ще
получите хубава обслужва обяд за тях

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 обяд в Кеймбридж
и New Haven е този петък.

50
00:02:45,320 --> 00:02:48,510
Отидете на уебсайта наклонена черта RSVP CS50 е.

51
00:02:48,510 --> 00:02:49,800
А сега няколко думи за семинари.

52
00:02:49,800 --> 00:02:50,730
Повече учебната програма.

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
>> Сега, много студенти завършват
правене на уеб базиран окончателните проекти.

61
00:03:11,730 --> 00:03:13,800
И разбира се, ние сме просто
Сега миналата седмица в тази

62
00:03:13,800 --> 00:03:15,890
и извън нея да се гмурне в уеб програмиране.

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
програмиране, Android
програмиране, разработка на видеоигри,

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
че сме преминали от рутера към рутер за
маршрутизатор между уеб браузър и уеб

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
щракнете някъде в уеб страница.

123
00:05:57,210 --> 00:05:59,070
И аз ще отида да Огледайте Element.

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
Така че това е като отстраняване на грешки
инструмент, вграден в Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Всички вие вече имате тази
ако сте били с помощта на Chrome.

129
00:06:13,520 --> 00:06:17,169
И това ви позволява да видите какво се случва
на под капака на някои уеб страница.

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
Enter.

144
00:06:53,643 --> 00:06:56,180
Така че един URL, че много от
може би сте посетили.

145
00:06:56,180 --> 00:06:58,830
И сега уеб Фейсбук
страница се появява в горната част.

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
не сте просто направи една HTTP заявка,
Оказва се, че ще Facebook.com

149
00:07:09,320 --> 00:07:14,320
изпраща 41 от тези пликове,
всяка със собствен искане получи,

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
колкото осем секунди
изтеглянето на всичко това.

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
Така че нека да отидете на този един точно тук
и ми позволи да намалите само за миг.

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
която е файла I искания.

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
>> Но това е вторият за
последната една там долу,

176
00:08:33,750 --> 00:08:38,809
забележите, че сървъра Facebook.com му,
наистина каза тук идва някакъв текст HTML.

177
00:08:38,809 --> 00:08:41,409
Така че всичко това е да се каже,
че когато си поискат уеб

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
HyperText Markup Language.

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
и кликнете върху View Page Source.

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
компания в Facebook са писали.

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
че най-простият уеб страница
че човек може да напише

203
00:09:53,364 --> 00:09:55,030
може да изглежда малко нещо като това.

204
00:09:55,030 --> 00:09:58,430
Open HTML тагове, отворена глава
маркер, отворете заглавие тагове,

205
00:09:58,430 --> 00:10:03,230
след това затворен заглавие, затворена глава, отворена
маркер тяло, някакъв текст, затворен орган,

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
по-лошо от I в написването HTML?

215
00:10:23,190 --> 00:10:24,310
Очевидно.

216
00:10:24,310 --> 00:10:26,899
>> Точно така, това е като един
от пет за стил.

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
Така че в известен смисъл, те са
тя obfuscating, нещо като това кодиране

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
Оказва се, че с програми
макар, включително Chrome,

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
Така че всеки клавиш от клавиатурата, е
[Недоловим] представени като един байт.

235
00:11:10,060 --> 00:11:14,560
>> Така че предполагам, че Mark или някоя от разработчиците
тези дни хитове интервала само веднъж

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
Един милиард байта, или един гигабайт
данните се изпращат от Facebook сървъри

244
00:11:41,660 --> 00:11:43,626
на хората около
свят без основателна причина.

245
00:11:43,626 --> 00:11:44,750
Сега, това е просто едно пространство.

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
И така, супер-често в
действителния свят на Мрежата за развитие

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 Огледайте Element,

254
00:12:10,120 --> 00:12:12,030
преди това, ние бяхме в раздела Network.

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
за да видите йерархията, която е дадена уеб страница.

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
И аз отивам да Verbatim
въведете следното.

266
00:12:39,820 --> 00:12:44,650
Doc тип HTML, отворена скоба
HTML, затворена скоба HTML,

267
00:12:44,650 --> 00:12:49,000
имаме главата на страницата тук,
В края на главата на страницата тук,

268
00:12:49,000 --> 00:12:52,310
заглавие ще бъде като, здравей свят.

269
00:12:52,310 --> 00:12:56,660
>> И тогава тук, ние се нуждаем
тялото на уеб страницата.

270
00:12:56,660 --> 00:12:58,050
Closed тялото.

271
00:12:58,050 --> 00:13:00,700
И тогава тук, здравей свят.

272
00:13:00,700 --> 00:13:01,270
Всичко е наред.

273
00:13:01,270 --> 00:13:03,350
Така че ние сме написал супер бърз уеб страница.

274
00:13:03,350 --> 00:13:06,675
Отивам да го запишете като
hello.html на компютъра си.

275
00:13:06,675 --> 00:13:09,050
My 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, тук е моят уеб страница.

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
Както никой в ​​тази зала
камо ли в интернет

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, разбира се,
облак базирани 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
Но как да направя всъщност
го отворите като уеб страница?

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.

303
00:14:21,140 --> 00:14:23,900
>> Всички вие, тоест,
имате собствен уеб сървър.

304
00:14:23,900 --> 00:14:26,850
А уеб сървър е просто парче
на софтуер, чиято цел в живота

305
00:14:26,850 --> 00:14:28,220
е да служи на уеб страници.

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
Така че това е уеб сървър
действително свободен и отворен код.

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
>> И сме направили, че е малко по-лесно да
използвате в CS50IDE от наричайки го Apache 50.

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 документ [? група?]
до дома, убунту, каквото и да е,

319
00:15:04,640 --> 00:15:05,770
Слаш работно пространство.

320
00:15:05,770 --> 00:15:08,280
Стартиране на уеб сървър
Apache 2 успешно.

321
00:15:08,280 --> 00:15:11,330
>> Така дълга история кратко, I
Току-що натисна звънеца

322
00:15:11,330 --> 00:15:18,000
и се обърна на уеб сървър, който е сега
слушане в интернет на TCP порт

323
00:15:18,000 --> 00:15:20,587
80 в определен адрес.

324
00:15:20,587 --> 00:15:22,420
И тук пише, а
това ще се промени Based

325
00:15:22,420 --> 00:15:26,550
върху вашето потребителско име и други фактори,
но сега, ако забележите I кликнете това,

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
посетете всички ваши файлове чрез интернет.

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
И това, което съм казал, Apache I уеб сървъра
се погледне в работното пространство на указателя Давид.

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
Това е, защото, въпреки че ние сме
използване на Chrome за посещение CS50IDE,

348
00:16:33,690 --> 00:16:37,940
вътрешността на CS50IDE е неговата собствена
версия на уеб браузър в момента.

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 Harvard 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
е моето невероятно underwhelming уеб страница.

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-Malan или 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
На третия ред и ред 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
>> Да, така стр.

402
00:18:55,200 --> 00:18:57,320
Маркерът р или параграф маркер.

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
И аз ще го кажа, за да се започне
отново във вътрешността на днешната източник седем

411
00:19:17,340 --> 00:19:18,420
м директория.

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
Но това е само три точки
на текст, който са отбелязани в 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
Може би просто
направите това и удари Save.

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
в само един, който се вижда празно.

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
Open скоба, ключова дума,
затворена скоба, е маркер.

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,
четири, пет или шест, всички от които

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
Така че тук е списък с водещи символи на
три от къщите на Харвард.

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
И тук, ние виждаме
Малко от фънк

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
Има и нещо, наречено
нареден списък, който е най-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
Ако не знаете защо правим
това, просто прочетете на Wikipedia.

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 Images.

501
00:23:16,750 --> 00:23:19,390
И нека да приемем, че това е
разумно навсякъде в интернет.

502
00:23:19,390 --> 00:23:22,570
Така че аз отивам да се предположи, че е добре за мен
действително да приложат това на моята уеб страница.

503
00:23:22,570 --> 00:23:24,820
Отивам да се продължи напред
и копирате URL на изображението.

504
00:23:24,820 --> 00:23:28,600
И сега ако се върна към Cloud
9, нека да видим какво мога да направя тук.

505
00:23:28,600 --> 00:23:30,630
Така че тук е само една уеб страница.

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
и след това натиснете Save.

541
00:25:09,020 --> 00:25:13,350
>> Така че, ако аз сега се презареди този файл, сега
Имам една добра уеб страница готвене тук.

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
Така Rick преобръщане.

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
искате да вградите видеото на вашия
уеб страница, просто вземете този.

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
Така се оказва, че образът
маркер и очевидно тага вградена рамка

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
>> Източникът на видеото се случва
да бъде толкова дълго URL YouTube

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
Така че, ако аз наистина искам да бъда
впечатляващо тук, в Rick дот 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
Какво е етикет, това, което е атрибут,
как да всъщност конфигурирате уеб страница

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
или да използвате Google как да се направят някои
или както сме виждали техника,

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
част от вашия личен
сайт или проблем

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
Така че файловете, които сте
позоваване в рамките на дадена уеб страница

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
>> Ние досега са били вземане
много статични уеб страници.

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
Отивам да вървим напред и да се създаде
нов файл наречен search.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
Така че тук е началото на
файл, наречен search.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 Search.

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
Добре, а този
е 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
ДОБРЕ.

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
Ще се въведат
нещо, наречено форма маркер.

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
наклонена надясно черта точно в самия етикет.

688
00:31:38,099 --> 00:31:39,890
И тогава аз ще
има един друг вход.

689
00:31:39,890 --> 00:31:43,480
Тип Input равнява представи.

690
00:31:43,480 --> 00:31:45,320
И тогава аз ще
затворите този също.

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
И аз може да видите нещо като ключови думи,
или по-точно, запитвания за р.

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 Font генератор.

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
ДОБРЕ.

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
Отивам да го плъзнете в
моят източник седем директорията,

731
00:33:15,360 --> 00:33:17,002
файл вече съществува, аз съм ОК с това.

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
припомни какво адреса прилича.

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
Въпрос марки р е равно на котки.

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
трябва буквално да е Google.

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
Action е странно име,
но това просто означава,

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
И ако аз сега се върнем към моя форма
тук и се презарежда уеб страницата ми

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, това е просто
по whelming, не е тя?

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
Ако щракнете върху Търсене, забележите, че
адреса променя както възнамерявах

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
И това е нещо, което е известно
като Cascading Style Sheets.

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
И така, ако искате да
стилизирам вашата уеб страница,

801
00:36:22,920 --> 00:36:28,370
вие всъщност трябва да се съсредоточи върху
естетика по различен начин.

802
00:36:28,370 --> 00:36:33,090
Така че тук, имам тялото на моя уеб
страница във вътрешността на което е голям Разделение.

803
00:36:33,090 --> 00:36:34,700
И Разделения просто означава деление.

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
голяма правоъгълна област моя уеб
страница, искам да се справя, специално.

808
00:36:45,210 --> 00:36:47,420
Сега, линия 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
>> В действителност, търсачката ми,
за разлика от действителната Google,

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
Ето как аз искам да
мисля за уеб страницата.

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
че ние въведохме днес
наречени Cascading Style Sheets.

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
получаване на размера и цвета и
поставяне точно така в страницата.

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
Но предполагам, че сега искам да кажа, John
Harvard, добре дошли в моята начална страница.

836
00:38:04,820 --> 00:38:06,530
>> Символ Copyright Джон Харвард.

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 е внедрен
Разделение или вложените Разделения, ако щете.

848
00:38:34,580 --> 00:38:36,190
Тя също има своя собствена таг стил.

849
00:38:36,190 --> 00:38:38,160
I зададени с размер на шрифта 36.

850
00:38:38,160 --> 00:38:40,460
I посочите тегло шрифта на смели.

851
00:38:40,460 --> 00:38:43,360
Тук долу, аз само зададени 24 пиксела.

852
00:38:43,360 --> 00:38:45,960
И накрая, в съответствие 28, I зададени 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
отбележим, че в моята
тялото на моята уеб страница,

875
00:39:48,630 --> 00:39:53,930
Мога да направя нещо смешно
като бг или цвета на фона.

876
00:39:53,930 --> 00:39:56,670
>> И бързо, кой е любимият ти цвят?

877
00:39:56,670 --> 00:39:57,720
Green чух.

878
00:39:57,720 --> 00:39:58,750
Всичко е наред.

879
00:39:58,750 --> 00:40:02,920
Така че сега, ако съм удари презареждане,
имаме зелена уеб страница.

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
или ако искате да бъдете
един от тези хора, които

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
вграждат цели гроздове
ключови думи в уеб страница,

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
страница като Бакалавърския, които
Започнах да използвате Google за да си намерят

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
Всъщност, аз открих
една точно преди клас.

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
Преди да успеят да
всъщност видя моята уеб страница.

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
Така че аз имам един куп
на divs, но този път, аз съм

930
00:42:05,250 --> 00:42:07,220
отървали на обвивката
Разделения както ще видите.

931
00:42:07,220 --> 00:42:12,390
>> И аз съм дал тези три divs
отгоре, средна и долна, уникални идентификатори.

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
И до този момент, по всяко време след като видяхме
начело на дадена уеб страница, това, което е

937
00:42:24,070 --> 00:42:28,560
единственият маркер сме имали в
ръководителят на една уеб страница?

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
Така че преди малко, ще погледна
най атрибут стил.

943
00:42:37,850 --> 00:42:39,150
Оказва се, че има един таг стил.

944
00:42:39,150 --> 00:42:41,200
Той принадлежи на вътрешността
ръководителят на дадена уеб страница.

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
Ефектът в края
е точно Сам.

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
Link.

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
И наистина, това е, което на един от най-
S е в Cascading Style Sheets средства.

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
на, защо е тази на
по-добър дизайн, вероятно?

984
00:44:44,220 --> 00:44:48,910
Факторинг извън тези CSS свойства,
пускането им в собственото си досие.

985
00:44:48,910 --> 00:44:51,330
Въпреки че сме решени този
Преди проблем като пет минути

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
И всъщност, за нещо,
като проблем определя седем,

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
И това ще бъде наистина
досадно, ако решите, хм,

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
Сега можете да отворите един текстов файл
в CS50IDE във всяка програма,

1005
00:45:34,720 --> 00:45:36,479
го промени, да го запишете, и направено.

1006
00:45:36,479 --> 00:45:38,270
Вие сте тези, размножен
промени навсякъде.

1007
00:45:38,270 --> 00:45:42,450
И това ще бъде същият
в една точка з файл, както добре.

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
>> И аз отивам да правя отворена
скоба тип док HTML.

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
>> Имам нужда от тялото на моята уеб страница тук.

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 идва от.

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
И сега, забележете, ако
това не е Disney.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
ние знаем, че искате
Индексът S за сигурност.

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
да badplace.com вместо Paypal.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