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
>> Дејвид Џ 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
Сликата тука е Кен следната
Марија во Њу Хејвен.

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, па само пред малку,

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
>> Но, во фотографии Бони, испаѓа
надвор се повеќе членови на персоналот, Сем

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
Толку голема Congrats на нив.

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
Повеќе 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
и пошироко нуркање во веб програмирање.

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
со вашиот ТФ за тоа.

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
Значи без понатамошно ado, ние
останев последен пат со ГЕТ.

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
Ова беше повеќе arcane порака дека
всушност бил во внатрешноста на плик

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

103
00:05:07,750 --> 00:05:10,800
или да ми даде моето сандаче или да му даде
ме стандардно страница на вести

104
00:05:10,800 --> 00:05:12,510
на веб-Ен-Ен или слично.

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
Бидејќи тоа значи дека во ред, на барање
беше прифатено постапува правилно.

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
Одам да се користат Хром, можете да го користите
повеќето било кој прелистувач во неделите што доаѓаат.

116
00:05:40,410 --> 00:05:42,410
Ние генерално препорачуваат Хром
затоа што тоа е особено

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
А јас ќе одам да се оди да се испита Елемент.

124
00:05:59,070 --> 00:06:03,850
А јас ќе одам да се tweak ми
екран само малку тука.

125
00:06:03,850 --> 00:06:05,790
Дозволете ми да се помести ова до дното.

126
00:06:05,790 --> 00:06:08,140
Значи ова е она што се нарекува
Инспектор Хром.

127
00:06:08,140 --> 00:06:11,010
Значи ова е како дебагирање
алатка е вградена во Хром.

128
00:06:11,010 --> 00:06:13,520
>> Сите од вас веќе ја имаат оваа
ако сте биле со користење на Хром.

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

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
И сега веб Фејсбук
страница доаѓа на врвот.

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
Па тоа е, всушност, малку чудно
тој сајт Фејсбук би се дека

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
И ќе видите дека Хром се покажува
ме во суштина внатрешниот содржината

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
види дека она што на Фејсбук врати
за мене е сите овие заглавија.

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
Одам да сега да се вратиме
до веб-страницата на Фејсбук.

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
Па дури и ако не го користите Хром,
IE да го направите тоа, Firefox може да го направите ова,

189
00:09:10,550 --> 00:09:14,060
Сафари да го направите ова, иако во менито
опции може да изгледа малку различен.

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

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
потоа затворен наслов, затворен глава, отворен
телото таг, на некој текст, затворена тело,

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
Фејсбук не е.

214
00:10:18,020 --> 00:10:23,190
Значи, зошто е толку многу на Фејсбук
полошо отколку што во пишување на 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
Излегува дека со програми
иако, вклучувајќи Хром,

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 многу или на
space, разгледа импликациите.

234
00:11:06,020 --> 00:11:10,060
Па секој на тастатурата е
[Беззвучен] претставен како еден бајт.

235
00:11:10,060 --> 00:11:14,560
>> Па претпоставувам дека Марк или било која од devs
овие денови хитови на spacebar само еднаш

236
00:11:14,560 --> 00:11:17,899
во овој HTML страница, која
претставува Фејсбук страница.

237
00:11:17,899 --> 00:11:19,690
И Facebook има многу
на корисници овие денови.

238
00:11:19,690 --> 00:11:24,030
Па претпоставувам дека Фејсбук почетната страница од пребарувачот
е посетен од една милијарда луѓе денес.

239
00:11:24,030 --> 00:11:27,020
И некој на Фејсбук има
погодувајќи ја само пречката простор само еднаш.

240
00:11:27,020 --> 00:11:29,890
>> Па еден дополнителен бајт,
милијарда барања,

241
00:11:29,890 --> 00:11:32,790
колку повеќе податоци е Фејсбук
пренос преку интернет

242
00:11:32,790 --> 00:11:37,160
затоа што некој ја погоди
spacebar на неговата или нејзината тастатура?

243
00:11:37,160 --> 00:11:41,660
Една милијарда бајти, или една GIGABYTE на
податоците се праќаат од серверите на Фејсбук

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
Излезе, сепак, ако се вратиме
на оваа алатка во Хром Увид елемент,

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
Хром е прилично печатени
верзија на истата 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
А јас ќе одам да се дословно
Внесете го следново.

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
Затворен тело.

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
Мојот 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 и кликнете на Save.

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
ИРО не е само компајлерот како ѕвекот

301
00:14:14,120 --> 00:14:16,670
и дебагер како GDB и
гроздовете на други програми,

302
00:14:16,670 --> 00:14:21,140
има всушност е полноправно
веб серверот се извршува во рамките на CS50 ИРО.

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
И се вика Апачи.

313
00:14:46,150 --> 00:14:51,450
>> И ние го направи тоа малку полесно да се
користите во CS50IDE страна нарекувајќи Апачи 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
И можеме да видиме некои малку
arcane порака велејќи

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
Почнувајќи веб сервер
Apache 2 успешно.

321
00:15:08,280 --> 00:15:11,330
>> Па скратам приказната, јас
Само што се наметнува едно копче

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
И пишува овде, и
ова ќе се промени врз основа

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
посетат сите на вашите датотеки преку интернет.

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

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

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 ИРО, забележително е
одеднаш на адреса бар.

347
00:16:29,480 --> 00:16:33,690
Тоа е затоа што иако ние сме
користење Хром да ја посетите 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
Одам да се оди напред и само
отворам сопствен прозорец Хром.

352
00:16:45,330 --> 00:16:47,800
Па нема магија тука, нема CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Јас сум само ќе се буквално ставете
мојата Ј Харвард URL адреса и притиснете Enter.

354
00:16:51,800 --> 00:16:54,750
И Voila, сега, и
Во теорија, секој

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, Voila, има

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

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
Може да сосема едноставно
да го направите ова, погодувајќи Зачувај.

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

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

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
Имам една Н1 таг, 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
Н1 е голем.

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
И тука, можеме да видиме една
малку 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
Има исто така нешто што се нарекува
подредена листа, која е ОЛ во таг.

473
00:22:01,850 --> 00:22:05,350
Потоа Ли, точка листа е за сите тоа значи.

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
Слики и Рик Astley.

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 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
И сега, ако се вратам во Облак
9, ајде да видам што можам да го направите тука.

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

506
00:23:30,630 --> 00:23:39,020
Ова е Рик Astley, ха, ха,
Одам да сега да се вратиме

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
Така што не е Рик Astley.

515
00:23:56,070 --> 00:23:59,680
Значи излегува можеме
всушност го додадете во тука.

516
00:23:59,680 --> 00:24:00,830
Ова е Рик Astley.

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
имаме отворена заграда,
ИМГ, затворена заграда?

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

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
>> Добро, едно лице се допадна.

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 таг нарекува IFRAME.

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
И така на пример,
Јутјуб ни кажува

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
Значи, ако јас навистина сакаат да бидат
импресивен тука во Рик точка 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
Значи она што се некои од takeaways тука?

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

600
00:27:43,080 --> 00:27:45,371
гледање на изворот на Фејсбук
код, гледајќи во еден веб-сајт

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
Јас ветувам дека нема да оди на Рик Astley, па
Одам да 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
земени од Фејсбук
или Фликр или слично

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
како и во случај на Рик
Astley фото пред малку.

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

650
00:29:56,027 --> 00:29:57,610
Не ставете го во терминален прозорец вашата.

651
00:29:57,610 --> 00:29:58,744
Prefab верзии онлајн.

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
И сега, јас ќе одам да се каже
нешто како Н1 CS50 пребарување.

659
00:30:17,500 --> 00:30:20,930
А потоа долу тука, Х2 наскоро.

660
00:30:20,930 --> 00:30:23,230
И само да го повториме, H1 и
Х2 значи она соодветно?

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
>> И името на овој влез
поле, јас ќе одам да го наречеме П.

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
Вид на внесување еднаква достават.

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
И јас може да се види нешто како клучни зборови,
или поконкретно, да прашува за 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
Јас не навистина ми се допаѓа на копчето Submit.

702
00:32:14,650 --> 00:32:18,320
Па јас сум всушност ќе даде
Копчето Submit вредност од пребарувањето.

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

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

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
И ред, ова е само
под 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
Ако јас кликнете на Барај, забележите дека
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
И ова е нешто што е познато
како 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
Па еве, јас имам телото на мојот веб-
страница во внатрешноста на кој е голем 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
голема правоаголна регионот на мојот веб-
страница, сакам да се справи со неа специјално.

808
00:36:45,210 --> 00:36:47,420
Сега, линија 21 е местото каде што div започнува.

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

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
Но, да претпоставиме сега сакам да кажам Џон
Харвард, добредојде на мојата страница.

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

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
Зелени слушнав.

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
страница како додипломски, кои
Почнав Googling околу да се најде

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
добиле ослободи од омотот
div како што ќе видите.

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
Така слични во духот со Ц, но
повторно, ова не е во функција,

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
>> Еј прелистувач, елемент чија
Проект е средината, тоа го прават 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
Дозволете ми сега да се вратиме тука да СЅЅ2
и да видиме што друго што го направив.

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

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
И навистина, тоа е она што на еден од
С во 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
>> А јас ќе одам да направите отворена
Држач за видот doc HTML.

1015
00:46:03,000 --> 00:46:05,970
Како настрана, ова нешто на
врвот, оваа декларација тип doc,

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
И овде, a 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
>> И навистина, ова е местото каде што
на H кај 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
ние знаеме дека сакате
на ОК за безбедност.

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 или Твитер или
Фејсбук или било кој број на други

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, која се допаѓа
Ц, ќе ни даде

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