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

2
00:00:01,390 --> 00:00:04,890
>> [Lecture de musique]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J Malan: Très bien, bienvenue.

5
00:00:12,580 --> 00:00:13,600
Ceci est CS50.

6
00:00:13,600 --> 00:00:15,540
Ceci constitue la fin de la septième semaine.

7
00:00:15,540 --> 00:00:18,180
Et il est la fin de ce trésor
chasse de problème mis en quatre

8
00:00:18,180 --> 00:00:19,220
que vous pouvez vous rappeler.

9
00:00:19,220 --> 00:00:21,650
Après avoir récupéré tous
les fichiers JPEG du personnel,

10
00:00:21,650 --> 00:00:24,820
vous ont été contestées, si vous le souhaitez,
pour vous photographier avec le plus grand nombre

11
00:00:24,820 --> 00:00:25,981
de ces gens que vous le pouvez.

12
00:00:25,981 --> 00:00:28,480
Nous avons eu tout un tas de demandes
au cours des dernières semaines,

13
00:00:28,480 --> 00:00:32,980
en effet, tout à fait un peu juste avant midi
aujourd'hui, dont certains sont ceux qui sont ici,

14
00:00:32,980 --> 00:00:37,670
pris ici in-- semble like-- Annenberg
Salle à des heures de bureau, un ici

15
00:00:37,670 --> 00:00:39,530
dans Lowell House avec Nick.

16
00:00:39,530 --> 00:00:41,750
Voici Ramon être pris sur le téléphone.

17
00:00:41,750 --> 00:00:43,870
Ce fut lors d'un déjeuner de CS50.

18
00:00:43,870 --> 00:00:46,840
Ce fut Jason Skyping avec
un camarade de classe de plus de créativité,

19
00:00:46,840 --> 00:00:48,280
qui lui a téléphoné de cette façon.

20
00:00:48,280 --> 00:00:49,690
Nous ne savons pas ce que cela était.

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

22
00:00:51,940 --> 00:00:54,570
>> DAVID J Malan: Mais
ça vaut un gigaoctet.

23
00:00:54,570 --> 00:00:56,960
Voici Chang, qui
littéralement couru hors de la scène

24
00:00:56,960 --> 00:01:00,480
pour éviter d'être photographié une
jour, mais a finalement été pris.

25
00:01:00,480 --> 00:01:02,050
Voici Nick.

26
00:01:02,050 --> 00:01:03,480
Voici Nick.

27
00:01:03,480 --> 00:01:04,080
Voici Nick.

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

29
00:01:05,090 --> 00:01:07,670
Et voici Alison par les champs.

30
00:01:07,670 --> 00:01:11,840
Et Zamyla même été trouvé
lors d'une compétition de salle de bal.

31
00:01:11,840 --> 00:01:14,100
Nous allons donc passer par
ces photos, comprendre

32
00:01:14,100 --> 00:01:16,690
qui a présenté le plus
plus tôt, et récompense

33
00:01:16,690 --> 00:01:20,662
un prix fabuleux, comme
promis dans la spécification.

34
00:01:20,662 --> 00:01:23,120
Et nous allons également faire un suivi sur
l'espace qui a été impliqué.

35
00:01:23,120 --> 00:01:26,860
>> Un couple de announcements-- donc déjeuner
est, de nouveau, ce vendredi à 13h15.

36
00:01:26,860 --> 00:01:30,420
Si vous souhaitez nous rejoindre,
RSVP à cette URL ici.

37
00:01:30,420 --> 00:01:33,730
Jason réapparaît ici d'un
des sections deux ans

38
00:01:33,730 --> 00:01:35,510
arrière, ce qui est arrivé
de tomber sur Halloween.

39
00:01:35,510 --> 00:01:38,950
Et en effet, il habillé comme un
citrouille cette année-là.

40
00:01:38,950 --> 00:01:42,700
Si vous regardez cette section
de sa section de 2011

41
00:01:42,700 --> 00:01:46,480
huit, si vous êtes curieux,
à CS50.tv, je pense

42
00:01:46,480 --> 00:01:49,730
ce fut l'année où
sa pompe à air travaillait.

43
00:01:49,730 --> 00:01:52,490
>> Si vous regardez alors la
section similaire en 2012,

44
00:01:52,490 --> 00:01:55,620
vous verrez ce Jason beaucoup dégonflé,
depuis le procès ne fonctionnait plus,

45
00:01:55,620 --> 00:01:58,060
qui est seulement à dire
ce vendredi, si vous souhaitez

46
00:01:58,060 --> 00:02:02,720
tiens à sculpter une citrouille avec Daven
et Gabe et autres, RSVP pour les chefs

47
00:02:02,720 --> 00:02:04,480
à l'adresse cs50.harvard.edu.

48
00:02:04,480 --> 00:02:06,200
Il promet d'être très amusant.

49
00:02:06,200 --> 00:02:08,660
Daven, on nous dit, est taillé
citrouilles toute sa vie.

50
00:02:08,660 --> 00:02:11,930
Gabriel du Brésil n'a jamais
sculpté une citrouille pour Halloween.

51
00:02:11,930 --> 00:02:14,700
Donc, être là avec eux qu'il apprend.

52
00:02:14,700 --> 00:02:16,830
>> Séminaires, meanwhile--
de sorte que vous apprendrez bientôt

53
00:02:16,830 --> 00:02:20,650
ce que nos attentes sont pour
le projet final, qui essentiellement

54
00:02:20,650 --> 00:02:23,150
se résument à
la conception et la mise en œuvre

55
00:02:23,150 --> 00:02:26,440
plus tout projet d'intérêt à
vous, bien que soumis à l'approbation

56
00:02:26,440 --> 00:02:28,490
et les conseils de votre collègue de l'enseignement.

57
00:02:28,490 --> 00:02:32,110
Vers la fin de la
semestre, nous introduisons un certain nombre

58
00:02:32,110 --> 00:02:35,610
de séminaires, qui sont des cours facultatifs
dirigée par les boursiers de l'enseignement et de Harvard

59
00:02:35,610 --> 00:02:38,570
personnel, les amis du cours à travers
campus, sur divers sujets qui

60
00:02:38,570 --> 00:02:41,470
sont tangents à la
programme sous-jacent de cours

61
00:02:41,470 --> 00:02:45,590
mais néanmoins applicable, amusant, et
différent pour les projets finaux potentiels.

62
00:02:45,590 --> 00:02:49,530
>> Par exemple, d'abord, si vous le souhaitez
à enregistrer, à la tête de cette URL là.

63
00:02:49,530 --> 00:02:53,010
Et cela est la gamme de
les séminaires de cette année.

64
00:02:53,010 --> 00:02:56,060
Mais rendons compte que nous avons des dizaines de
séminaires des années passées, qui tous

65
00:02:56,060 --> 00:02:59,774
sont liés dans le menu Séminaires
l'option du site Web de cours.

66
00:02:59,774 --> 00:03:02,190
Donc, si vous songez à
aller au-delà de votre zone de confort

67
00:03:02,190 --> 00:03:05,060
ou ramasser quelques nouvelles compétences,
par exemple, la programmation iPhone

68
00:03:05,060 --> 00:03:08,100
applications avec Swift, une nouvelle langue
d'Apple ou Objective-C

69
00:03:08,100 --> 00:03:11,230
ou Android apps ou programmation [? cue?]
ampoules, ou l'un des sujets

70
00:03:11,230 --> 00:03:15,490
ici et plus, en raison chèque
sur la page d'inscription.

71
00:03:15,490 --> 00:03:19,730
>> Nous avons donc commencé et conclu sur
Lundi, avec la recherche à HTTP.

72
00:03:19,730 --> 00:03:22,675
Donc HTTP refresher-- rapide,
HyperText Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Mais qu'est-ce que cela signifie réellement?

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

75
00:03:26,805 --> 00:03:27,930
Qu'est-ce que cela signifie vraiment?

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

77
00:03:30,665 --> 00:03:31,290
Est-ce un coup de main?

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

79
00:03:33,074 --> 00:03:34,740
Je sais que vous êtes juste gratter la tête.

80
00:03:34,740 --> 00:03:36,400
Mais vous voulez proposer ce qui est HTTP?

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

82
00:03:37,792 --> 00:03:40,576
>> Public: Comment les ordinateurs
communiquer avec [inaudible].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J Malan: je raté la dernière partie.

85
00:03:43,100 --> 00:03:45,774
Comment les ordinateurs communiquent with--

86
00:03:45,774 --> 00:03:47,325
>> serveurs Internet: de l'auditoire.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan: Good-- avec internet
serveurs, et en particulier, les serveurs Web.

88
00:03:50,450 --> 00:03:53,533
Parce rappel, il ya un tas de
services sur Internet, dont certaines

89
00:03:53,533 --> 00:03:57,349
vous utilisez probablement tous les jours entre le chat
et le message, chat, web et e-mail,

90
00:03:57,349 --> 00:03:57,890
et analogues.

91
00:03:57,890 --> 00:04:00,900
Et HTTP est que le
protocole que les navigateurs Web

92
00:04:00,900 --> 00:04:03,750
parler pour communiquer avec
les serveurs Web, et vice versa.

93
00:04:03,750 --> 00:04:05,580
Et l'analogue de la
monde humain pourrait être,

94
00:04:05,580 --> 00:04:08,730
Je tends la main pour secouer certains
autre humain de et il ou elle

95
00:04:08,730 --> 00:04:11,970
reconnaît en étendant
sa main ainsi.

96
00:04:11,970 --> 00:04:13,970
Voilà donc tout un protocole,
un ensemble de conventions.

97
00:04:13,970 --> 00:04:15,630
>> Et ce sont en effet ces conventions?

98
00:04:15,630 --> 00:04:18,640
Eh bien, cela se résume juste en bas à
l'envoi de messages d'avant en arrière,

99
00:04:18,640 --> 00:04:19,770
comme nous l'avons représenté ici.

100
00:04:19,770 --> 00:04:22,520
Et il ya deux façons de
qui vous pouvez envoyer ces messages.

101
00:04:22,520 --> 00:04:24,360
Et peut-être le plus
commun est connu comme get.

102
00:04:24,360 --> 00:04:26,510
Et nous allons voir un contraste
à cette avant longtemps.

103
00:04:26,510 --> 00:04:30,010
>> Mais une requête GET à partir d'un navigateur
au serveur semble juste comme ça.

104
00:04:30,010 --> 00:04:32,960
Il ya un tas de texte qu'il met
à l'intérieur d'une enveloppe virtuelle.

105
00:04:32,960 --> 00:04:35,854
A l'extérieur de cette enveloppe
aller quelques morceaux de détails.

106
00:04:35,854 --> 00:04:37,770
Que faut aller sur le
enveloppe, pour ainsi dire,

107
00:04:37,770 --> 00:04:41,820
afin d'obtenir une telle demande
ce de moi pour un serveur web?

108
00:04:41,820 --> 00:04:42,320
Ouais.

109
00:04:42,320 --> 00:04:43,270
>> Public: Votre adresse IP.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J Malan: Mon adresse IP
dans le domaine de, pour ainsi dire,

111
00:04:45,890 --> 00:04:49,490
et bien entendu, la
l'adresse IP du destinataire.

112
00:04:49,490 --> 00:04:52,710
Mais dans le cas d'un paquet de bande,
nous avons besoin d'un peu plus de détails

113
00:04:52,710 --> 00:04:55,254
Il ne suffit pas seulement de
envoyer une enveloppe à un serveur,

114
00:04:55,254 --> 00:04:57,670
parce que le serveur peut être
l'écoute de différents types

115
00:04:57,670 --> 00:04:59,180
du trafic Internet.

116
00:04:59,180 --> 00:05:01,370
Alors quoi d'autre avons-nous besoin
d'ailleurs IP du destinataire?

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

118
00:05:02,723 --> 00:05:03,222
Ouais?

119
00:05:03,222 --> 00:05:04,241
>> Public: Est-ce des BCI?

120
00:05:04,241 --> 00:05:05,074
DAVID J Malan: Bon.

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

122
00:05:06,470 --> 00:05:07,340
>> PUBLIC: Adresse.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan: Adresse,
ou le port, comme on l'appelle.

124
00:05:09,340 --> 00:05:11,010
Close, mais un numéro de port TCP.

125
00:05:11,010 --> 00:05:12,220
Et il ya un tas de ces.

126
00:05:12,220 --> 00:05:14,310
Mais sûrement le plus
familier devrait finalement

127
00:05:14,310 --> 00:05:17,590
soit 80, qui est la valeur par défaut
celui utilisé pour le trafic Web.

128
00:05:17,590 --> 00:05:20,040
Et un autre familier
une aura bientôt 443,

129
00:05:20,040 --> 00:05:24,280
qui est utilisé pour Web sécurisé
trafic, les URL qui commencent par https.

130
00:05:24,280 --> 00:05:26,650
>> Voilà donc ce que va
à l'intérieur de cette enveloppe.

131
00:05:26,650 --> 00:05:29,780
Et obtenir / juste moyens, donner
moi la page Web par défaut.

132
00:05:29,780 --> 00:05:32,700
Donnez-moi la racine du disque
conduire sur ce serveur Web.

133
00:05:32,700 --> 00:05:36,050
Et nous espérons que, sur le web
serveur répondra avec, OK

134
00:05:36,050 --> 00:05:39,630
et le nombre 200, qui est juste
une convention dire, oui, tout

135
00:05:39,630 --> 00:05:40,470
est en effet OK.

136
00:05:40,470 --> 00:05:41,680
Voici la page.

137
00:05:41,680 --> 00:05:45,510
Le type de la page Web va
être du texte, mais plus spécifiquement, HTML,

138
00:05:45,510 --> 00:05:47,010
qui nous sommes sur le point de se replonger dans.

139
00:05:47,010 --> 00:05:49,877
Et le point de dot dot juste
moyens, voici le code HTML.

140
00:05:49,877 --> 00:05:51,710
Et voilà où nous en
ramasser l'histoire aujourd'hui,

141
00:05:51,710 --> 00:05:55,740
fait écrire du HTML,
HyperText Markup Language, qui

142
00:05:55,740 --> 00:05:57,727
est la langue dans laquelle
pages web sont écrites.

143
00:05:57,727 --> 00:05:59,060
Il est pas un langage de programmation.

144
00:05:59,060 --> 00:06:01,270
Il n'y a pas les fonctions
ou des boucles ou des conditions.

145
00:06:01,270 --> 00:06:03,800
Il est un langage de balisage,
ainsi voir encore aujourd'hui,

146
00:06:03,800 --> 00:06:07,240
qui vous permet de spécifier
la façon de structurer et de styliser

147
00:06:07,240 --> 00:06:09,300
esthétiquement une page Web.

148
00:06:09,300 --> 00:06:11,470
>> Donc, ce fut une
et que nous avons vraiment la page

149
00:06:11,470 --> 00:06:13,930
regardé, si brièvement, lundi.

150
00:06:13,930 --> 00:06:16,250
Et remarquez que quelques-uns
principales caractéristiques.

151
00:06:16,250 --> 00:06:20,170
Il ya beaucoup de l'open angle
support et équerre près.

152
00:06:20,170 --> 00:06:23,160
Entre ceux angle
parenthèses sont des mots.

153
00:06:23,160 --> 00:06:25,660
Et nous allons commencer
appelant ces mots tags.

154
00:06:25,660 --> 00:06:28,800
Tête de support de façon ouverte
et la tête de support fermé

155
00:06:28,800 --> 00:06:33,620
sont les balises d'ouverture et de fermeture,
ou les balises de début et de fin

156
00:06:33,620 --> 00:06:37,660
respectivement, d'un élément HTML,
comme nous l'appelons, appelé tête.

157
00:06:37,660 --> 00:06:41,760
Et le même jargon applique
à corps en HTML et ainsi de suite.

158
00:06:41,760 --> 00:06:43,970
>> Et ce qui est bien est
HTML-- et en effet, nous allons

159
00:06:43,970 --> 00:06:47,187
passer terriblement peu de temps sur elle,
parce que vous aurez la plupart du temps juste à déterminer

160
00:06:47,187 --> 00:06:49,770
quelles sont les caractéristiques qu'il possède lorsque vous
avoir réellement un problème concret

161
00:06:49,770 --> 00:06:52,820
à solve-- vous verrez que
un navigateur est assez stupide.

162
00:06:52,820 --> 00:06:56,450
Il va juste do-- pas la différence
un computer-- ce que vous lui demandez de faire.

163
00:06:56,450 --> 00:06:59,279
Et donc quand vous avez ouvert
support HTML au sommet

164
00:06:59,279 --> 00:07:01,320
y, qui essentiellement
juste moyen, bon, navigateur,

165
00:07:01,320 --> 00:07:04,090
voici une page Web écrite en HTML.

166
00:07:04,090 --> 00:07:06,130
>> Quand il voit parenthèse ouverte
tête, ce qui signifie tout simplement,

167
00:07:06,130 --> 00:07:10,350
hey, navigateur, voici la tête, ou
la partie supérieure de ma page web.

168
00:07:10,350 --> 00:07:14,192
Quand il voit un support fermé
tête, cela signifie juste, bon,

169
00:07:14,192 --> 00:07:15,150
ça y est pour la tête.

170
00:07:15,150 --> 00:07:16,420
Veille pour autre chose.

171
00:07:16,420 --> 00:07:18,878
Et que quelque chose est
apparemment va être le corps.

172
00:07:18,878 --> 00:07:22,630
Et quand vous ne disposez pas d'une étiquette, comme
vous avez juste bonjour, virgule, monde,

173
00:07:22,630 --> 00:07:26,610
qui va juste être du texte brut qui
en fin de compte est affiché à l'écran.

174
00:07:26,610 --> 00:07:29,220
>> Maintenant, vous remarquerez aussi
l'indentation ici.

175
00:07:29,220 --> 00:07:32,160
Vous pouvez probablement déduire
comment nous stylisant.

176
00:07:32,160 --> 00:07:34,850
Chaque fois que je ouvre une balise,
pour ainsi dire, je le retrait.

177
00:07:34,850 --> 00:07:38,540
Et chaque fois que je ferme
une étiquette, je ONU-tiret,

178
00:07:38,540 --> 00:07:40,690
dans le même esprit à accolades.

179
00:07:40,690 --> 00:07:43,470
Et au-delà de cela, je suis un peu
de l'utilisation de mon jugement.

180
00:07:43,470 --> 00:07:48,380
Notez que je ne l'ai pas pris la peine de frapper
Entrez à l'intérieur de cette balise de titre.

181
00:07:48,380 --> 00:07:48,990
Pourquoi?

182
00:07:48,990 --> 00:07:51,920
Eh bien, je décidai qu'il avait l'air un
peu plus propre à moi, l'être humain,

183
00:07:51,920 --> 00:07:53,181
juste pas la peine de le faire.

184
00:07:53,181 --> 00:07:54,930
Encore une fois, il ya une certaine
jugement appelle simplement

185
00:07:54,930 --> 00:07:57,670
comme il est dans C ou toute autre langue.

186
00:07:57,670 --> 00:08:04,110
>> Mais notez aussi que cette voûte
se prête à un modèle mental,

187
00:08:04,110 --> 00:08:05,670
de ne pas trop compliquer.

188
00:08:05,670 --> 00:08:07,020
Mais un arbre, non?

189
00:08:07,020 --> 00:08:09,290
Si vous pensez à un web
Cette page, apparemment écrite

190
00:08:09,290 --> 00:08:12,050
comme ça, comme étant
bien en retrait de cette façon,

191
00:08:12,050 --> 00:08:17,390
vous pouvez presque penser à la parenthèse ouverte
HTML support fermé balise délimitant

192
00:08:17,390 --> 00:08:21,380
la racine d'un nœud, d'un arbre généalogique
nœud de style dans le style des arbres

193
00:08:21,380 --> 00:08:22,900
nous avons examiné vendredi dernier.

194
00:08:22,900 --> 00:08:27,630
>> Et en effet, nous avons le droit ici
ce que nous appellerons DOM, D-O-M, un document

195
00:08:27,630 --> 00:08:31,680
modèle objet, une façon élégante de dire
un arbre qui représente le HTML.

196
00:08:31,680 --> 00:08:36,140
Et remarquez que HTML a, on va dire,
comme un arbre de la famille, deux enfants.

197
00:08:36,140 --> 00:08:37,659
Sur la gauche est la tête.

198
00:08:37,659 --> 00:08:39,179
Sur la droite est corps.

199
00:08:39,179 --> 00:08:44,220
>> Et juste comme un exercice de pensée stupide,
tête, bien sûr, a le nombre d'enfants

200
00:08:44,220 --> 00:08:46,070
selon cette structure?

201
00:08:46,070 --> 00:08:48,200
Donc, un seul, title--
et voilà pourquoi nous avons

202
00:08:48,200 --> 00:08:50,580
la flèche partant de la tête vers le titre.

203
00:08:50,580 --> 00:08:55,110
Il est donc comme si cette personne dans le
arbre généalogique avait qu'un seul progéniture.

204
00:08:55,110 --> 00:08:58,230
Et puis le titre lui-même peut
dire d'avoir un enfant trop.

205
00:08:58,230 --> 00:09:01,780
>> Rappelons que le HTML a
bonjour, virgule, monde dessous.

206
00:09:01,780 --> 00:09:06,090
Et je l'ai simplement dessiné dans un
ovale au lieu d'un rectangle suffit

207
00:09:06,090 --> 00:09:10,559
à transmettre sémantiquement que même si
il est un nœud de l'arbre, pour ainsi dire,

208
00:09:10,559 --> 00:09:12,100
il est une sorte de fondamentalement différent.

209
00:09:12,100 --> 00:09:12,800
Il est pas une étiquette.

210
00:09:12,800 --> 00:09:14,780
Ou plus correctement, il est pas un élément.

211
00:09:14,780 --> 00:09:16,590
Il est juste un noeud de texte, si vous voulez.

212
00:09:16,590 --> 00:09:18,990
Mais ceux-ci sont complètement
conventions sur les droits arbitraires.

213
00:09:18,990 --> 00:09:23,180
Ceci est tout à l'heure ma façon de
représentant ce que je vais comme un agrégat

214
00:09:23,180 --> 00:09:24,340
appeler le document.

215
00:09:24,340 --> 00:09:27,750
>> Et en passant, la chose à
le coin super top de la main gauche,

216
00:09:27,750 --> 00:09:32,080
parenthèse ouverte point d'exclamation doc
Type HTML, cela ressemble à une étiquette,

217
00:09:32,080 --> 00:09:35,560
mais il est le cas de coin stupide où
qui est juste là, copié et collé

218
00:09:35,560 --> 00:09:38,460
à indiquer les navigateurs
cette est une version HTML 5.

219
00:09:38,460 --> 00:09:41,540
Le monde ne cesse de changer ce que le
première ligne de code dans une page devrait être.

220
00:09:41,540 --> 00:09:43,820
Cela signifie simplement que la version 5.

221
00:09:43,820 --> 00:09:45,950
Donc, il ne fait pas assez
ressembler aux autres.

222
00:09:45,950 --> 00:09:48,120
>> Très bien, alors avec qui
dit, vous allez maintenant apprécier

223
00:09:48,120 --> 00:09:50,767
ce assez stupide cette
tatouage quelqu'un a eu.

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

225
00:09:51,990 --> 00:09:54,210
>> DAVID J Malan: Très bien,
et maintenant de laisser réellement plongée

226
00:09:54,210 --> 00:09:55,710
à faire quelque chose avec cela.

227
00:09:55,710 --> 00:09:58,610
Vous vous souviendrez que la dernière fois
Je ouvert la Appliance CS50

228
00:09:58,610 --> 00:10:01,650
et je faisais quelque chose comme
simple que l'ouverture de gedit.

229
00:10:01,650 --> 00:10:05,190
Et je sauvé le fichier, même sur
mon desktop-- nulle part special--

230
00:10:05,190 --> 00:10:05,870
comme hello.html.

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

232
00:10:07,100 --> 00:10:10,984
>> Alors laissez-moi faire ce que
again-- hello.html Entrée.

233
00:10:10,984 --> 00:10:13,900
Et maintenant, dans ce dossier, je vais
aller de l'avant et de reproduire ce que nous venons

234
00:10:13,900 --> 00:10:18,850
saw-- Type doc html Alors je vais
faire ouverte html de support support fermé.

235
00:10:18,850 --> 00:10:21,890
Et puis je vais préventivement
ouvrir et fermer la balise.

236
00:10:21,890 --> 00:10:22,390
Pourquoi?

237
00:10:22,390 --> 00:10:23,598
Juste pour que je ne l'oublie pas plus tard.

238
00:10:23,598 --> 00:10:26,850
Il est une bonne pratique, comme ouverture
une paire d'accolades à la fois.

239
00:10:26,850 --> 00:10:28,900
>> Et puis ce qui est venu ensuite?

240
00:10:28,900 --> 00:10:30,582
Vous pouvez penser que le tatouage.

241
00:10:30,582 --> 00:10:31,450
>> PUBLIC: La tête.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J Malan: La tête.

243
00:10:32,500 --> 00:10:36,020
Et puis ici, je
eu le titre, je pense.

244
00:10:36,020 --> 00:10:39,886
Et le titre était arbitrairement,
bonjour, titre proche du monde.

245
00:10:39,886 --> 00:10:42,760
Et puis ici, le corps, de
course-- puis nous fermons la balise body.

246
00:10:42,760 --> 00:10:45,660
Et puis juste un peu redondante,
Je eu la même chose ici.

247
00:10:45,660 --> 00:10:47,150
>> Donc, je prétends que ceci est une page web.

248
00:10:47,150 --> 00:10:49,050
Ceci est quelque chose que
pourraient maintenant vivre sur le web,

249
00:10:49,050 --> 00:10:51,925
même si bien sûr, il est littéralement
vivre sur mon bureau en ce moment.

250
00:10:51,925 --> 00:10:55,837
Mais en fait, si je minimise gedit,
Je vois sur mon bureau l'icône.

251
00:10:55,837 --> 00:10:58,420
Même si cela est l'appareil,
vous pouvez le faire sur Mac OS

252
00:10:58,420 --> 00:11:01,580
sans TextEdit ou
Bloc-notes de Windows avec même.

253
00:11:01,580 --> 00:11:06,115
>> Et si je vais de l'avant et double-cliquez
que même, et sélectionner-- bien, nous allons

254
00:11:06,115 --> 00:11:07,990
Ne sélectionnez pas parce que
Chrome est de ne pas ouvrir.

255
00:11:07,990 --> 00:11:09,281
Allons de l'avant et ouvrir Chrome.

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

257
00:11:10,160 --> 00:11:14,040
Et puis faire Commande + O pour ouvrir
Et de naviguer sur mon bureau

258
00:11:14,040 --> 00:11:15,320
et ouvrir ce fichier.

259
00:11:15,320 --> 00:11:20,120
Voilà comment un navigateur interprète
HTML, de haut en bas, de gauche à droite.

260
00:11:20,120 --> 00:11:21,314
Hey, voici navigateur HTML.

261
00:11:21,314 --> 00:11:21,980
Voici la tête.

262
00:11:21,980 --> 00:11:23,250
Voici le titre.

263
00:11:23,250 --> 00:11:24,090
Voici le corps.

264
00:11:24,090 --> 00:11:26,620
Et en effet, voici comment
elle rend cette page Web.

265
00:11:26,620 --> 00:11:27,800
>> Mais notez l'URL.

266
00:11:27,800 --> 00:11:32,430
Aucun d'entre vous pourrait tirer vers le haut ce spécifique
page sur vos ordinateurs portables à l'heure actuelle,

267
00:11:32,430 --> 00:11:34,910
même à l'intérieur de votre
appareil via cette URL,

268
00:11:34,910 --> 00:11:40,130
parce que file: // indique qu'il est en fait
sur mon système de fichiers, mon disque dur,

269
00:11:40,130 --> 00:11:40,990
pas le vôtre.

270
00:11:40,990 --> 00:11:42,440
Donc, ce ne sont pas d'une grande utilité.

271
00:11:42,440 --> 00:11:44,940
>> Passons maintenant vers
l'utilisation d'un serveur Web réelle.

272
00:11:44,940 --> 00:11:48,309
Et il se trouve le CS50 Appliance
est plus que juste un environnement où

273
00:11:48,309 --> 00:11:51,100
vous pouvez écrire du code C et compiler
et exécutez-le comme vous l'avez fait.

274
00:11:51,100 --> 00:11:55,500
Il a également été configuré par le
personnel pour représenter une web typique

275
00:11:55,500 --> 00:11:58,290
le serveur qui se trouve sur l'Internet,
celui que vous pourriez payer pour

276
00:11:58,290 --> 00:12:00,210
ou celui qui est dans le nuage soi-disant.

277
00:12:00,210 --> 00:12:02,600
>> Et elle est en marche
open source gratuit standard

278
00:12:02,600 --> 00:12:06,160
logiciel, par exemple, quelque chose
appelé Apache, qui est peut-être

279
00:12:06,160 --> 00:12:08,700
encore le web le plus populaire
un logiciel de serveur dans le monde

280
00:12:08,700 --> 00:12:11,030
que des milliers de sites Web utilisent aujourd'hui.

281
00:12:11,030 --> 00:12:13,420
Et il a aussi même
logiciel comme MySQL,

282
00:12:13,420 --> 00:12:16,240
qui est un serveur de base de données
que nous finirons par arriver à,

283
00:12:16,240 --> 00:12:18,330
qui est seulement à dire
Je peux commencer à traiter

284
00:12:18,330 --> 00:12:22,040
mon appareil comme un serveur à part entière
que je ne vais pas payer pour ailleurs.

285
00:12:22,040 --> 00:12:25,980
Il vit juste sur mon propre ordinateur portable pour
des fins de développement et de commodité.

286
00:12:25,980 --> 00:12:27,870
>> Donc, nous allons aller de l'avant et
profiter de cette.

287
00:12:27,870 --> 00:12:30,120
Je vais aller de l'avant et
ouvrir une fenêtre de terminal.

288
00:12:30,120 --> 00:12:33,030
Et je vais aller de l'avant et
move-- fait, d'abord je suis

289
00:12:33,030 --> 00:12:34,860
aller à naviguer sur mon bureau.

290
00:12:34,860 --> 00:12:36,400
Si je fais ls, il ya hello.html.

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

292
00:12:37,022 --> 00:12:38,730
Et je vais aller
de l'avant et commencer à utiliser

293
00:12:38,730 --> 00:12:40,800
un nouveau répertoire que nous avons
pas utilisé avant aujourd'hui.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- je vais passer
à ../vhosts pour hosts-- virtuel

295
00:12:46,840 --> 00:12:50,940
plus de détails dans le future-- puis
dans un répertoire appelé localhost,

296
00:12:50,940 --> 00:12:54,420
qui est le surnom donné à presque
un ordinateur, que ce soit un Mac, PC,

297
00:12:54,420 --> 00:12:57,560
ou un ordinateur Linux, puis
spécifiquement dans un répertoire que nous,

298
00:12:57,560 --> 00:13:01,260
le personnel déjà créé pour vous lorsque
vous avez téléchargé l'appareil appelé

299
00:13:01,260 --> 00:13:01,760
public.

300
00:13:01,760 --> 00:13:04,551
Et comme son nom l'indique, rien
Je mets dans ce dossier, en théorie,

301
00:13:04,551 --> 00:13:07,790
va être maintenant
publique, au moins pour les personnes

302
00:13:07,790 --> 00:13:10,030
qui ont un effet direct
Connexion à mon ordinateur.

303
00:13:10,030 --> 00:13:13,160
>> Alors maintenant, laissez-moi aller de l'avant et
faire cd à ce même répertoire

304
00:13:13,160 --> 00:13:15,490
afin que je puisse voir ce qui est
passe et tapez ls.

305
00:13:15,490 --> 00:13:17,630
Et, en effet, que est le
seule chose là-dedans.

306
00:13:17,630 --> 00:13:23,250
Je prétends que maintenant parce que je l'ai mis cette
déposer hello.html l'intérieur d'un répertoire

307
00:13:23,250 --> 00:13:26,940
appelé à l'intérieur du public d'un répertoire
appelé localhost à l'intérieur d'un répertoire

308
00:13:26,940 --> 00:13:29,810
appelés serveurs virtuels, qui
merci au personnel CS50

309
00:13:29,810 --> 00:13:34,390
a été pré-configuré pour être
la racine de votre serveur web,

310
00:13:34,390 --> 00:13:36,900
Je peux maintenant nous espérons le faire.

311
00:13:36,900 --> 00:13:38,390
>> Je vais ouvrir un nouvel onglet.

312
00:13:38,390 --> 00:13:40,090
Et je vais pas à déposer: //.

313
00:13:40,090 --> 00:13:44,520
Je vais utiliser réelle
http / localhost, qui

314
00:13:44,520 --> 00:13:47,470
encore une fois, est le surnom
pour mon propre serveur.

315
00:13:47,470 --> 00:13:51,085
Et puis je vais aller à ce
le nom du fichier, juste pour être clair?

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

317
00:13:52,680 --> 00:13:54,320
Où est cette histoire va probablement?

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

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

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

321
00:13:58,350 --> 00:14:04,270
>> En d'autres termes, je veux maintenant cette
est mon propre ordinateur, mon propre appareil,

322
00:14:04,270 --> 00:14:05,660
comme si il est un serveur réel.

323
00:14:05,660 --> 00:14:07,490
Son surnom est localhost.

324
00:14:07,490 --> 00:14:10,210
Mais penser que localhost comme
Facebook.com google.com, peu importe.

325
00:14:10,210 --> 00:14:11,600
Il est juste mon nom local.

326
00:14:11,600 --> 00:14:14,810
Et puis la finale, je veux est dans le
racine du disque dur, pour ainsi dire,

327
00:14:14,810 --> 00:14:17,729
ou la racine du serveur web,
ergo la barre oblique, puis

328
00:14:17,729 --> 00:14:18,770
le nom du fichier hello.html.

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

330
00:14:19,880 --> 00:14:21,930
>> Permettez-moi de faire un zoom arrière et appuyez sur Entrée.

331
00:14:21,930 --> 00:14:24,266
Et en effet, il est maintenant ma page web.

332
00:14:24,266 --> 00:14:25,390
Donc, il est un peu différent.

333
00:14:25,390 --> 00:14:26,880
Et il est tout aussi décevante.

334
00:14:26,880 --> 00:14:27,904
Ceci est l'ancienne version.

335
00:14:27,904 --> 00:14:29,070
Permettez-moi de réduire la police de retour.

336
00:14:29,070 --> 00:14:29,745
Ceci est l'ancienne.

337
00:14:29,745 --> 00:14:30,890
Telle est la nouvelle.

338
00:14:30,890 --> 00:14:35,430
Mais ce qui est fondamentalement passe
Il est maintenant que HTTP est utilisé.

339
00:14:35,430 --> 00:14:39,344
>> Faisons ce un peu plus clair ou,
si vous voulez, un peu plus compliqué.

340
00:14:39,344 --> 00:14:41,760
Laissez-moi aller en bas à droite
coin de mon appareil.

341
00:14:41,760 --> 00:14:44,000
Et remarquez que tout cela
temps, il ya eu un certain nombre.

342
00:14:44,000 --> 00:14:47,330
Voilà l'adresse unique
de votre CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Il est une adresse privée,
comme le laisse entendre le 172.16,

344
00:14:50,800 --> 00:14:53,860
qui signifie simplement que vous physiquement
peut accéder à ce serveur Web.

345
00:14:53,860 --> 00:14:56,340
Tout est un pare-feu et
bien protégé du reste

346
00:14:56,340 --> 00:14:58,130
du monde en raison de cet adressage.

347
00:14:58,130 --> 00:15:01,920
>> Et maintenant remarquer que si je vais à
cette adresse, pas dans mon appareil,

348
00:15:01,920 --> 00:15:04,340
mais dans Mac OS-- je vais
pour revenir ici.

349
00:15:04,340 --> 00:15:05,930
Ceci est mon Mac maintenant.

350
00:15:05,930 --> 00:15:08,460
Et maintenant, je vais ouvrir
cette version de Chrome ici.

351
00:15:08,460 --> 00:15:17,370
Et je vais aller à http: //172.16.25
/ Et je ne sais plus le rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Donc, je vais rendre visite à mon Mac
cette adresse IP /hello.html Entrée.

353
00:15:25,210 --> 00:15:29,850
Et maintenant je vois depuis mon Mac
que mon CS50 Appliance, qui est

354
00:15:29,850 --> 00:15:32,600
adresse IP est que
nombre, est en effet comporter

355
00:15:32,600 --> 00:15:34,320
comme un serveur Web sur Internet.

356
00:15:34,320 --> 00:15:36,944
Il n'a pas une belle facile à
se souvenir du nom comme Facebook.com,

357
00:15:36,944 --> 00:15:40,370
mais il utilise HTTP
apparemment, même si Chrome

358
00:15:40,370 --> 00:15:43,560
est une sorte de simplifier le monde
pour nous, mais pas nous montrer HTTP.

359
00:15:43,560 --> 00:15:46,210
Mais cela est en effet exactement cela.

360
00:15:46,210 --> 00:15:48,470
Chrome est juste de sauver certains
frappes de nos jours.

361
00:15:48,470 --> 00:15:50,530
Et qui est ce que nous voyons maintenant.

362
00:15:50,530 --> 00:15:51,890
>> Voilà donc tout beau et bon.

363
00:15:51,890 --> 00:15:53,740
Mais il est une page assez décevante.

364
00:15:53,740 --> 00:15:56,230
Laissez-moi aller et faire quelque chose
un peu différent maintenant.

365
00:15:56,230 --> 00:15:57,910
Alors permettez-moi de revenir à gedit.

366
00:15:57,910 --> 00:16:00,580
Et au lieu de bonjour,
monde, nous allons mettre une image.

367
00:16:00,580 --> 00:16:05,880
Et je prétendais de before-- me laisser aller
dans mon répertoire localhost public.

368
00:16:05,880 --> 00:16:10,580
Et laissez-moi aller de l'avant et copier un
tas ensemble de fichiers à partir d'aujourd'hui

369
00:16:10,580 --> 00:16:15,633
de mon dossier Dropbox en ici.

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

371
00:16:19,470 --> 00:16:21,680
>> Maintenant, si je tape ls, regarder
à tous ces fichiers

372
00:16:21,680 --> 00:16:24,940
que je vous ai distribué par le
le site Web de cours à l'avance d'aujourd'hui,

373
00:16:24,940 --> 00:16:26,830
dont l'un est encore hello.html.

374
00:16:26,830 --> 00:16:27,830
Donc, il ya celui-là.

375
00:16:27,830 --> 00:16:30,730
Et rappeler cette stupide un
de la dernière cat.jpg time--.

376
00:16:30,730 --> 00:16:34,550
Je vais donc essayer d'intégrer
cat.jpg l'intérieur de ma page web.

377
00:16:34,550 --> 00:16:37,690
>> Je vais aller de l'avant
et faire cat.jpg, sauver.

378
00:16:37,690 --> 00:16:38,950
Permettez-moi de revenir à Chrome.

379
00:16:38,950 --> 00:16:41,140
Et permettez-moi de zoom dans le
police et maintenant recharger.

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

381
00:16:43,090 --> 00:16:45,030
Oops, où je mets ce?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- je dois encore l'ancien
la version de mon bureau ouverte.

384
00:16:51,520 --> 00:16:56,020
Alors laissez-moi aller dans mon serveur virtuel, mon
localhost, mon public et hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Alors maintenant, laissez-moi aller de l'avant et
cat.jpg-dire à l'intérieur du corps

387
00:17:00,670 --> 00:17:02,830
où je veux que ce soit
affiché et recharger.

388
00:17:02,830 --> 00:17:04,560
Bien sûr, ce ne sont pas correctes.

389
00:17:04,560 --> 00:17:08,050
>> Je dois donc dire au navigateur un peu
plus délibérément ce que je veux faire.

390
00:17:08,050 --> 00:17:10,210
Il suffit de taper le nom est
évidemment pas suffisant.

391
00:17:10,210 --> 00:17:15,134
Donc, rappeler qu'il y avait un autre
étiquette, image, img pour faire court.

392
00:17:15,134 --> 00:17:17,550
Voilà juste parce que les humains
ne pas aimer les mots pleins de type.

393
00:17:17,550 --> 00:17:19,050
Et puis nous pouvons faire source = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> Et maintenant, je vais faire
une chose différente ici.

396
00:17:23,550 --> 00:17:25,390
Même si tous
nos étiquettes ont jusqu'à présent

397
00:17:25,390 --> 00:17:28,086
eu cette notion de
balise de début et une balise de fin,

398
00:17:28,086 --> 00:17:30,210
qui ne fait pas vraiment
sens d'une image, non?

399
00:17:30,210 --> 00:17:32,430
Une image est soit là ou pas.

400
00:17:32,430 --> 00:17:36,650
Et si les humains sont venus
avec une convention simple.

401
00:17:36,650 --> 00:17:40,310
Lorsque vous avez une étiquette qui peut à la fois
commencer et se terminer à la même time--

402
00:17:40,310 --> 00:17:43,790
il peut être vide, pour ainsi speak-- juste
mettre la barre oblique à l'intérieur de la balise

403
00:17:43,790 --> 00:17:44,710
à la fin.

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

405
00:17:45,776 --> 00:17:47,150
Maintenant, permettez-moi de revenir à mon navigateur.

406
00:17:47,150 --> 00:17:50,377
Hit Recharger Merde, quelque chose qui ne va pas.

407
00:17:50,377 --> 00:17:52,460
Vous avez probablement vu cette
de temps en temps sur la bande,

408
00:17:52,460 --> 00:17:53,600
même si cela n'a pas été votre faute.

409
00:17:53,600 --> 00:17:54,766
Il est de la faute du serveur web.

410
00:17:54,766 --> 00:17:56,240
Que ce odes semblent indiquer?

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

412
00:17:57,450 --> 00:17:58,009
Il est cassé.

413
00:17:58,009 --> 00:17:59,300
Voilà où l'image appartient.

414
00:17:59,300 --> 00:17:59,700
Ouais?

415
00:17:59,700 --> 00:18:01,560
>> PUBLIC: Mais il ne
avoir accès à l'image.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J Malan: Il ne fait pas
avoir accès à l'image.

417
00:18:03,070 --> 00:18:05,230
Ce, ou pire encore, peut-être
il n'a même pas exister.

418
00:18:05,230 --> 00:18:06,729
Voyons voir si nous ne pouvons pas diagnostiquer que.

419
00:18:06,729 --> 00:18:09,390
Rappel de la dernière fois que si
en chrome, dans l'appareil,

420
00:18:09,390 --> 00:18:11,870
ou encore sur votre Mac ou PC,
vous allez dans le menu de développeur

421
00:18:11,870 --> 00:18:14,650
et aller dans les Outils de développement
option, qui probablement vous avez

422
00:18:14,650 --> 00:18:16,850
pas utilisé beaucoup ou jamais.

423
00:18:16,850 --> 00:18:20,780
Et si je vais au Réseau
et rechargez la page,

424
00:18:20,780 --> 00:18:24,110
nous allons examiner notre HTTP
demandes qui sont faites.

425
00:18:24,110 --> 00:18:28,400
>> Il ressemble à hello.html est
en effet OK, donc le 200.

426
00:18:28,400 --> 00:18:30,630
Mais cat.jpg est 403.

427
00:18:30,630 --> 00:18:31,650
Donc, il est pas un 404.

428
00:18:31,650 --> 00:18:33,490
Le fichier existe probablement.

429
00:18:33,490 --> 00:18:35,250
403 signifie interdite.

430
00:18:35,250 --> 00:18:37,790
Donc, cela est un peu confus.

431
00:18:37,790 --> 00:18:42,340
Je vais revenir
à ma fenêtre de terminal.

432
00:18:42,340 --> 00:18:43,700
Permettez-moi de zoomer jusqu'à ici.

433
00:18:43,700 --> 00:18:44,750
Et permettez-moi de faire une ls.

434
00:18:44,750 --> 00:18:46,430
Il ya les mêmes fichiers.

435
00:18:46,430 --> 00:18:49,410
>> Maintenant, permettez-moi de faire un ls -l,
qui vous avez probablement

436
00:18:49,410 --> 00:18:53,350
utilisé avant de regarder dans les fichiers
peut-être la taille ou l'horodatage.

437
00:18:53,350 --> 00:18:55,590
Et nous voyons tout un tas de
informations écrasante.

438
00:18:55,590 --> 00:18:57,040
Mais remarquez quelques détails.

439
00:18:57,040 --> 00:19:01,660
Voici hello.html en ce
ramer ici et voici cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
Et il est juste l'appareil étant
amical en soulignant JPEG de l'utilisateur

442
00:19:05,850 --> 00:19:07,380
en violet comme ça.

443
00:19:07,380 --> 00:19:11,470
Mais quoi d'autre est différent à côté
la taille du fichier et le nom du fichier?

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

445
00:19:13,438 --> 00:19:14,754
>> PUBLIC: [inaudible].

446
00:19:14,754 --> 00:19:16,920
DAVID J Malan: Oui, il ya
de plus ici deux plus R.

447
00:19:16,920 --> 00:19:20,170
Notez ce hello.html a passe.

448
00:19:20,170 --> 00:19:24,050
Ainsi, il apparaît que le nom de
cet annuaire public est important.

449
00:19:24,050 --> 00:19:26,400
Tout dans ce répertoire
est destiné à être public.

450
00:19:26,400 --> 00:19:28,790
Mais il ne suffit pas
juste pour déposer des fichiers dedans.

451
00:19:28,790 --> 00:19:31,480
Vous devez également modifier
le mode de fichiers,

452
00:19:31,480 --> 00:19:35,180
modifier les autorisations de
le fichier de manière proactive pas

453
00:19:35,180 --> 00:19:37,650
le réglage par défaut,
qui est celle que je peux lire

454
00:19:37,650 --> 00:19:39,220
et écrire, I étant le propriétaire.

455
00:19:39,220 --> 00:19:43,540
Je veux tout le monde, tout le monde à
être capable de lire mon dossier, pour ainsi dire.

456
00:19:43,540 --> 00:19:44,950
Lire signifie simplement l'afficher.

457
00:19:44,950 --> 00:19:49,780
>> Et en effet, comme vous le verrez dans le problème
mis sept, qui est ce moyen de ces R.

458
00:19:49,780 --> 00:19:53,160
La moyenne de ces deux R laisser tout le monde
ailleurs dans le monde également lire,

459
00:19:53,160 --> 00:19:55,300
surtout maintenant que
il est dans ce répertoire.

460
00:19:55,300 --> 00:19:59,620
Donc, la façon la plus simple de résoudre ce problème est de
aller à mon message et faire chmod pour le changement

461
00:19:59,620 --> 00:20:05,580
mode, puis font un + r, tout à fait,
tout le monde, tous, plus r pour lecture,

462
00:20:05,580 --> 00:20:07,944
et puis cat.jpg Entrée.

463
00:20:07,944 --> 00:20:10,360
Rien ne semble se produire, qui
signifie généralement une bonne chose.

464
00:20:10,360 --> 00:20:13,850
Donc ls -l again-- maintenant
regardons cat.jpg.

465
00:20:13,850 --> 00:20:15,750
Et cette autorisation
semblent avoir changé.

466
00:20:15,750 --> 00:20:18,670
En passant, si vous faites une
erreur et vous, par exemple,

467
00:20:18,670 --> 00:20:23,210
juste fait votre-- je ne know-- essai
accessible au public par accident,

468
00:20:23,210 --> 00:20:25,480
vous pouvez faire l'inverse, un chmod-R.

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

470
00:20:25,909 --> 00:20:28,200
Bien franchement, il ne devrait pas
être dans le répertoire public

471
00:20:28,200 --> 00:20:29,760
de toute façon si tel est le sujet de préoccupation.

472
00:20:29,760 --> 00:20:32,475
>> Alors maintenant, revenons à
mon navigateur et recharge.

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

474
00:20:32,904 --> 00:20:34,820
Et je vais cliquez sur
le petit Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbole pour supprimer la partie de la
écran afin que nous puissions voir les nouvelles demandes.

476
00:20:38,030 --> 00:20:40,630
Et en effet, ici est
Cat Grump d'avant.

477
00:20:40,630 --> 00:20:43,010
Mais plus important encore,
techniquement, il est

478
00:20:43,010 --> 00:20:45,565
le nombre 200, qui
signifie que nous avons eu sur OK.

479
00:20:45,565 --> 00:20:47,190
Très bien, alors que tout est beau et bon.

480
00:20:47,190 --> 00:20:48,940
Mais nous ne faisons pas
le meilleur des sites,

481
00:20:48,940 --> 00:20:51,967
ni que nous allons essayer trop dur à
faire le plus chic de sites Web d'aujourd'hui.

482
00:20:51,967 --> 00:20:54,550
Mais nous allons au moins faire quelque chose
Super familier avant de cliquetis

483
00:20:54,550 --> 00:20:56,030
de quelques autres balises.

484
00:20:56,030 --> 00:20:58,470
Alors suppose que je ne veux pas juste un chat ici.

485
00:20:58,470 --> 00:21:02,530
Supposons que je veux réellement ce
chat de relier à quelque chose.

486
00:21:02,530 --> 00:21:07,210
>> Je pourrais, par exemple
faire quelque chose comme ça.

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

488
00:21:08,580 --> 00:21:12,890
pour un ancrage pour href
hyper equals-- de référence

489
00:21:12,890 --> 00:21:17,440
et nous allons juste faire quelque chose
comme www.google.com près

490
00:21:17,440 --> 00:21:19,540
citer parenthèse fermante.

491
00:21:19,540 --> 00:21:22,000
Et maintenant, la recherche pour les chats.

492
00:21:22,000 --> 00:21:23,520
Fermer balise d'ancrage.

493
00:21:23,520 --> 00:21:26,760
Cela a donc une seule sorte
de fondamentalement nouveau détail.

494
00:21:26,760 --> 00:21:28,190
La balise bien sûr, est différente.

495
00:21:28,190 --> 00:21:31,770
Il est le nom d'une ancre pour
référence href ou hyper.

496
00:21:31,770 --> 00:21:35,269
>> Mais plus important encore, il est
cette fonction syntaxique ici.

497
00:21:35,269 --> 00:21:37,810
Voilà ce que nous allons commencer à appeler
pas une étiquette, mais un attribut.

498
00:21:37,810 --> 00:21:40,830
Et un attribut est quelque chose qui
modifie le comportement d'une balise.

499
00:21:40,830 --> 00:21:45,400
Et que cet attribut, href, des moyens
modifier le comportement de cette ancre

500
00:21:45,400 --> 00:21:48,430
de sorte que quand il est cliqué,
il va à cette adresse ici.

501
00:21:48,430 --> 00:21:50,330
Et bien sûr, cette URL est Google.

502
00:21:50,330 --> 00:21:53,951
>> Pendant ce temps, qu'est-ce
texte ici va être?

503
00:21:53,951 --> 00:21:55,950
Eh bien, que ça va être
ce qui en fait l'homme

504
00:21:55,950 --> 00:21:58,470
voit que l'soulignée
lien, aussi simple que cela.

505
00:21:58,470 --> 00:21:59,220
Essayons donc cette.

506
00:21:59,220 --> 00:21:59,980
Permettez-moi de le sauver.

507
00:21:59,980 --> 00:22:01,650
Je suis toujours dans hello.html.

508
00:22:01,650 --> 00:22:05,360
Mais dans les versions en ligne, vous verrez
les noms de fichiers réels nous préparés à l'avance.

509
00:22:05,360 --> 00:22:06,805
Permettez-moi aller de l'avant et recharger.

510
00:22:06,805 --> 00:22:08,680
Et maintenant, il est un très
Cette page décevante encore.

511
00:22:08,680 --> 00:22:10,910
Mais si je survole there--
et il est un peu petite,

512
00:22:10,910 --> 00:22:13,576
mais-- vous pouvez voir dans le fond
coin gauche de votre écran,

513
00:22:13,576 --> 00:22:15,242
il est en effet aller à google.com.

514
00:22:15,242 --> 00:22:19,280
Et si je clique cela, il sera
fouetter me sens à l'actuel Google.

515
00:22:19,280 --> 00:22:22,610
>> Mais remarquez ici l'occasion pour
exploitation, tout comme un côté.

516
00:22:22,610 --> 00:22:25,150
Et nous reviendrons à l'autre
les questions de sécurité avant longtemps.

517
00:22:25,150 --> 00:22:29,290
Parce qu'il ya cette dichotomie
entre l'endroit où vous allez et ce que vous dites,

518
00:22:29,290 --> 00:22:34,722
vous pourriez faire quelque chose comme
this-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, et maintenant si je recharge
après avoir sauvé cette page,

520
00:22:37,134 --> 00:22:38,800
on dirait que je vais aller sur Google.

521
00:22:38,800 --> 00:22:40,966
Mais il n'y a pas de raison que je
avoir à aller sur Google, non?

522
00:22:40,966 --> 00:22:47,460
Je pouvais aller à quelque chose comme
badguy.com, recharger la page ici.

523
00:22:47,460 --> 00:22:49,750
Et remarquez, il ressemble toujours à Google.

524
00:22:49,750 --> 00:22:52,020
Et que si je suis forte
assez pour planer au-dessus ici

525
00:22:52,020 --> 00:22:54,770
je ne vois il est même aller à
aller à un endroit différent.

526
00:22:54,770 --> 00:22:57,400
>> Donc, si vous avez déjà reçu
un courrier électronique, en particulier

527
00:22:57,400 --> 00:22:59,610
un de Paypal, ou
apparemment de Paypal

528
00:22:59,610 --> 00:23:01,830
vous demandant de vous identifier
à votre compte, ce

529
00:23:01,830 --> 00:23:06,380
est pourquoi vous ne devriez jamais
jamais cliquer sur des liens dans des e-mails,

530
00:23:06,380 --> 00:23:07,930
franchement, tous les liens dans les emails.

531
00:23:07,930 --> 00:23:10,380
Si vous savez que vous avez réel
argent dans Paypal ou Banque

532
00:23:10,380 --> 00:23:14,250
d'Amérique ou Fidelity ou tout
site, tapez manuellement dans.

533
00:23:14,250 --> 00:23:17,530
Parce que regardez comment il est facile de
tromper quelqu'un en présentant ce

534
00:23:17,530 --> 00:23:18,526
ressemble à un lien.

535
00:23:18,526 --> 00:23:20,400
Mais il pourrait effectivement
aller absolument partout.

536
00:23:20,400 --> 00:23:23,301
>> Et il ya beaucoup plus
menaces que cela.

537
00:23:23,301 --> 00:23:25,300
En fait, ceci est un bit
d'une tangente maintenant, mais un

538
00:23:25,300 --> 00:23:28,430
des meilleurs que je jamais vu
qui a depuis été fermé,

539
00:23:28,430 --> 00:23:34,060
est quelqu'un conduit les gens
to-- alors cela pourrait dire,

540
00:23:34,060 --> 00:23:37,660
cliquez ici pour vous connecter à votre
compte, un compte en banque.

541
00:23:37,660 --> 00:23:40,985
Et ce fut Bank of the West.

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

543
00:23:43,030 --> 00:23:44,250
>> Donc, quelqu'un a acheté ce.

544
00:23:44,250 --> 00:23:47,090
Et il est un peu plus facile à voir
dans une police mono espacées zoom

545
00:23:47,090 --> 00:23:49,190
sur un projecteur de 30 pieds.

546
00:23:49,190 --> 00:23:51,720
Mais quand elle est petite police dans un
e-mail que vous recevez,

547
00:23:51,720 --> 00:23:54,690
cela ressemble bankofthewest.com,
pas bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
qui quelqu'un avait payé 10 $ à acheter.

549
00:23:58,230 --> 00:24:00,840
Et puis ce qui les a conduit à la
équivalent de quelque mauvais site.

550
00:24:00,840 --> 00:24:05,540
>> Et vous verrez too-- fait que nous pouvons faire
this-- si je vais sur le site actuel,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, de nouveau,
rappel de la dernière fois

552
00:24:10,335 --> 00:24:13,210
que si tel est leur page Web et
vous êtes curieux de savoir comment cela fonctionne,

553
00:24:13,210 --> 00:24:15,610
vous pouvez certainement aller à
Les outils de développement de Chrome.

554
00:24:15,610 --> 00:24:18,890
Et vous pouvez voir toutes les
HTML bien formaté il.

555
00:24:18,890 --> 00:24:20,890
>> Mais plus au point,
vous cam-- Fermons

556
00:24:20,890 --> 00:24:24,760
this-- vous pouvez aller à Voir
Développeur Afficher la source.

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

558
00:24:25,770 --> 00:24:28,350
Pourquoi puis-je copier non seulement
tout cela et puis je

559
00:24:28,350 --> 00:24:31,630
peut aller dans ma petite fenêtre gedit
ici et faire ma propre page web.

560
00:24:31,630 --> 00:24:33,210
Enregistrer ce en hello.html.

561
00:24:33,210 --> 00:24:36,770
Et sans doute cela va casser,
car il est pas aussi facile habituellement.

562
00:24:36,770 --> 00:24:41,590
Mais maintenant, si je recharge ma propre page sur
mon propre CS50 d'appareils et de recharger la page,

563
00:24:41,590 --> 00:24:42,990
OK, quelques trucs cassé.

564
00:24:42,990 --> 00:24:45,750
Mais je suis assez près d'avoir
mon propre site web bancaire, droit?

565
00:24:45,750 --> 00:24:46,570
Tout cela HTML--

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

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan: -I
ne actually-- et vous

568
00:24:49,210 --> 00:24:52,210
savoir qu'il ya quelqu'un là-bas qui
serait effectivement cliquer sur ces liens trop.

569
00:24:52,210 --> 00:24:54,864
Donc, clairement, certaines choses se brisa.

570
00:24:54,864 --> 00:24:56,780
Mais cela va conduire
nous dans une discussion,

571
00:24:56,780 --> 00:25:00,810
inutilement en ce moment, à ce
CSS, feuilles de style en cascade, sont,

572
00:25:00,810 --> 00:25:03,410
et comment vous avez réellement
télécharger les autres fichiers HTML

573
00:25:03,410 --> 00:25:06,140
et JPEG fichiers GIF
le site pourrait être utilisé.

574
00:25:06,140 --> 00:25:07,960
Mais tout cela est réalisable.

575
00:25:07,960 --> 00:25:11,110
Mais il se résume à
ces heuristiques très simples.

576
00:25:11,110 --> 00:25:14,450
>> Alors maintenant, nous allons simplement parcourir une
quelques autres exemples de HTML

577
00:25:14,450 --> 00:25:16,680
juste pour vous donner une idée
de ce que vous pouvez faire.

578
00:25:16,680 --> 00:25:18,670
Par exemple, ceci est list.html.

579
00:25:18,670 --> 00:25:23,240
Supposons que je voulais faire une page web
avec une liste de maisons dans le quad.

580
00:25:23,240 --> 00:25:28,960
Je pourrais utiliser la balise ul pour non ordonnée
liste, puis l'élément de liste enfant

581
00:25:28,960 --> 00:25:33,760
et puis itérer over-- ou liste,
rather-- les maisons en question.

582
00:25:33,760 --> 00:25:36,080
>> Et si je l'ouvre cette place, nous allons le faire.

583
00:25:36,080 --> 00:25:40,670
Allons pas à Hello.html,
mais à list.html.

584
00:25:40,670 --> 00:25:42,160
Bon sang.

585
00:25:42,160 --> 00:25:43,000
Comment puis-je résoudre ce problème?

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

587
00:25:45,679 --> 00:25:47,220
Il est de la même question que précédemment, non?

588
00:25:47,220 --> 00:25:52,510
Alors laissez-moi faire oops-- chmod--
chmod a + r de list.html.

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

590
00:25:54,610 --> 00:25:59,610
Et maintenant, si je reviens à mon navigateur
et cliquez sur Reload, il est là.

591
00:25:59,610 --> 00:26:02,360
Donc, si vous avez toujours voulu faire
une liste à puces, vous pouvez le faire.

592
00:26:02,360 --> 00:26:06,210
Si vous voulez être super chic et faire
une liste ordonnée, pas une liste non ordonnée,

593
00:26:06,210 --> 00:26:10,170
changer ceux ol, recharger la page, et
maintenant le navigateur comptera pour vous.

594
00:26:10,170 --> 00:26:11,241
>> Que pouvons-nous faire?

595
00:26:11,241 --> 00:26:13,990
Eh bien, un couple de others-- si
vous avez de longs paragraphes de text--

596
00:26:13,990 --> 00:26:15,698
par exemple, certaines
Texte latin comme this--

597
00:26:15,698 --> 00:26:20,730
et vous voulez dans des paragraphes distincts,
p ouvert, p près de la balise de paragraphe.

598
00:26:20,730 --> 00:26:22,010
Et le faire encore et encore.

599
00:26:22,010 --> 00:26:26,600
Et si je l'ouvre maintenant ce fichier,
paragraphs.html, eh bien, ce

600
00:26:26,600 --> 00:26:27,570
est d'obtenir ennuyeux.

601
00:26:27,570 --> 00:26:34,320
Alors maintenant, nous allons simplement revenir à mon
rapide, chmod a + r r étoiles .html--

602
00:26:34,320 --> 00:26:36,099
un joli petit joker pour ainsi dire.

603
00:26:36,099 --> 00:26:37,890
Il convient de fixer tous
ces problèmes pour moi.

604
00:26:37,890 --> 00:26:38,990
Disons recharger.

605
00:26:38,990 --> 00:26:40,500
Il ya trois paragraphes.

606
00:26:40,500 --> 00:26:42,930
>> Et maintenant, nous allons aller de l'avant
et ouvrir un autre.

607
00:26:42,930 --> 00:26:44,310
Que diriez-table?

608
00:26:44,310 --> 00:26:46,440
Vous remarquerez la table regards
un peu plus complexe.

609
00:26:46,440 --> 00:26:49,110
Mais il en est de même idea--
étiquette ouverte, étiquette ouverte,

610
00:26:49,110 --> 00:26:51,360
ouvert, ouvert, ouverture, fermeture, étiquette ouverte.

611
00:26:51,360 --> 00:26:54,410
Et ceux-ci se produisent à tenir pour
table, dont la frontière est apparemment

612
00:26:54,410 --> 00:26:58,500
va être une épaisseur 1-- quelle que soit
ce tableau désigne: rangée, table

613
00:26:58,500 --> 00:27:00,320
données, ce qui signifie une cellule.

614
00:27:00,320 --> 00:27:03,840
Et si je reviens à mon navigateur
ici et aller à table.html,

615
00:27:03,840 --> 00:27:05,840
vous pouvez voir quelque chose
comme ça, hideux.

616
00:27:05,840 --> 00:27:07,840
Mais nous y reviendrons au point
où nous pouvons réellement

617
00:27:07,840 --> 00:27:09,260
rendre les choses plus jolie que ça.

618
00:27:09,260 --> 00:27:10,530
>> Permettez-moi donc stipuler maintenant.

619
00:27:10,530 --> 00:27:11,870
Il ya des grappes de plusieurs balises.

620
00:27:11,870 --> 00:27:15,225
Et HTML est merveilleux de prendre
parce que, franchement, tout ce que vous devez faire

621
00:27:15,225 --> 00:27:17,600
est de regarder des pages Web existantes
avec lequel vous êtes familier.

622
00:27:17,600 --> 00:27:20,340
Et vous êtes comme, oh, voilà comment
ils l'ont fait cette esthétique.

623
00:27:20,340 --> 00:27:23,159
>> Ou vous pouvez rechercher tout en ligne
ressources sur la façon dont fonctionne HTML,

624
00:27:23,159 --> 00:27:25,700
et vous verrez qu'il ya une
vocabulaire ensemble des autres balises.

625
00:27:25,700 --> 00:27:30,110
Mais avec le modèle mental simple,
seul que presque toute étiquette vous ouvrez

626
00:27:30,110 --> 00:27:33,620
doit être fermé, il a vraiment
ne suffit à soi-même enseigner

627
00:27:33,620 --> 00:27:36,950
HTML après comprendre
ces idées de base de balises

628
00:27:36,950 --> 00:27:40,520
et les attributs et la bonne forme
que nous avons parlé,

629
00:27:40,520 --> 00:27:44,697
fermer quoi que ce soit que nous puissions ouvrir
de sorte que nous ne confondons pas un navigateur.

630
00:27:44,697 --> 00:27:46,780
Prenons donc maintenant ce à
un niveau plus intéressant

631
00:27:46,780 --> 00:27:48,100
en allant à l'actuel.

632
00:27:48,100 --> 00:27:51,095
Passons maintenant à mon Mac
ici, à google.com.

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

634
00:27:52,280 --> 00:27:54,020
Et maintenant notice-- de le faire.

635
00:27:54,020 --> 00:27:57,280
Je suis gong pour aller à
Paramètres, Paramètres de recherche.

636
00:27:57,280 --> 00:28:01,070
Je veux éteindre cet instant ennuyeux
Résultats chose où il immédiatement

637
00:28:01,070 --> 00:28:02,450
commence à répondre à votre saisie.

638
00:28:02,450 --> 00:28:05,300
Faisons cette ancienne école afin
nous voyons réellement ce qui se passe.

639
00:28:05,300 --> 00:28:08,260
>> Donc, je vais sauver ma
Les paramètres de Google ici.

640
00:28:08,260 --> 00:28:11,160
Et maintenant notice-- je vais
chercher quelque chose comme les chats.

641
00:28:11,160 --> 00:28:14,500
Et il est toujours de faire auto
complète ici, mais basé sur des choses

642
00:28:14,500 --> 00:28:15,970
les gens ont tapé dans le passé.

643
00:28:15,970 --> 00:28:17,490
Mais remarquez ce qui va se passer.

644
00:28:17,490 --> 00:28:20,272
>> Dans l'URL au moment
est ce, juste google.com.

645
00:28:20,272 --> 00:28:22,650
Et techniquement, il est oblique.

646
00:28:22,650 --> 00:28:25,910
Google vient de sauver un caractère
et pas nous qui l'affiche.

647
00:28:25,910 --> 00:28:30,400
Ils nous montrent https, tout simplement
être super rassurant que nous sommes

648
00:28:30,400 --> 00:28:32,850
à une page sécurisée ou cryptée.

649
00:28:32,850 --> 00:28:35,690
>> Alors laissez-moi aller de l'avant et cherche pour les chats.

650
00:28:35,690 --> 00:28:37,670
Maintenant, cela a vraiment
écrasante rapidement.

651
00:28:37,670 --> 00:28:39,470
Regardez la longueur de cette adresse URL.

652
00:28:39,470 --> 00:28:43,070
Mais il se trouve que la plupart de ce genre de choses
dans l'URL est en fait assez inutile.

653
00:28:43,070 --> 00:28:45,320
Je vais commencer à supprimer
choses que je ne comprends pas.

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

655
00:28:46,560 --> 00:28:47,360
Je vois les chats.

656
00:28:47,360 --> 00:28:48,470
Je comprends les chats.

657
00:28:48,470 --> 00:28:50,380
Je ne sais pas pourquoi les chats sont là de nouveau.

658
00:28:50,380 --> 00:28:52,620
Je ne sais vraiment pas
ce cette absurdité est.

659
00:28:52,620 --> 00:28:56,030
Donc je vais juste garder
mettre en évidence et de supprimer des trucs

660
00:28:56,030 --> 00:28:59,905
que je ne comprends pas,
distillation de l'URL dans tout cela.

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

662
00:29:00,920 --> 00:29:02,270
>> Maintenant, permettez-moi de me ENTER.

663
00:29:02,270 --> 00:29:03,814
Il ressemble à Google fonctionne encore.

664
00:29:03,814 --> 00:29:06,980
Donc, pour une raison quelconque, ils sont en ajoutant un
beaucoup de choses par le défaut de leur URL.

665
00:29:06,980 --> 00:29:09,000
Mais il est pas strictement nécessaire.

666
00:29:09,000 --> 00:29:10,340
Donc, ce qui est agréable à ce sujet?

667
00:29:10,340 --> 00:29:13,630
Eh bien, laissez-moi aller de l'avant et
ouvrir l'inspecteur de Chrome.

668
00:29:13,630 --> 00:29:15,960
Il ya un raccourci de la souris peu pour elle.

669
00:29:15,960 --> 00:29:17,360
>> Allez à l'onglet Réseau.

670
00:29:17,360 --> 00:29:19,340
Et maintenant, permettez-moi de recharge
cette page une fois de plus.

671
00:29:19,340 --> 00:29:20,280
Et je suis maintenant la touche Maj.

672
00:29:20,280 --> 00:29:22,520
En aparté, les navigateurs
ont tendance à mettre en cache ou enregistrer

673
00:29:22,520 --> 00:29:24,697
informations seulement pour des raisons d'efficience.

674
00:29:24,697 --> 00:29:27,280
Mais généralement, la détention et Maj
rechargement va forcer tout

675
00:29:27,280 --> 00:29:28,994
à recommencer depuis le début.

676
00:29:28,994 --> 00:29:30,410
Et voilà ce que je veux faire ici.

677
00:29:30,410 --> 00:29:33,550
>> Et remarquez tous ces
les lignes qui vient de paraître.

678
00:29:33,550 --> 00:29:37,920
Il se trouve que dans tout donné web
Cette page, il pourrait y avoir un seul fichier

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- ou il
peut-être 52, comme dans ce cas.

680
00:29:43,500 --> 00:29:45,820
Lorsque je visite google.com,
apparemment, mon navigateur

681
00:29:45,820 --> 00:29:49,650
coup d'envoi de 52 requêtes HTTP séparées.

682
00:29:49,650 --> 00:29:50,520
Pourquoi donc?

683
00:29:50,520 --> 00:29:53,380
>> Eh bien, regardez ce qui est à l'intérieur
de cette page web en haut.

684
00:29:53,380 --> 00:29:55,620
Il n'y a pas que du texte,
mais il ya des images réelles

685
00:29:55,620 --> 00:29:57,130
des chats de plus vers la droite.

686
00:29:57,130 --> 00:29:59,110
Il ya un logo coloré ici à gauche.

687
00:29:59,110 --> 00:30:01,750
Il ya toutes ces icônes
pour un microphone et ainsi de suite.

688
00:30:01,750 --> 00:30:05,130
Il ya beaucoup de pièces, la construction
blocs, des morceaux de grattage, si vous voulez,

689
00:30:05,130 --> 00:30:06,250
à cette page web.

690
00:30:06,250 --> 00:30:10,310
Et ce que le navigateur est en train de faire sur
obtenir le premier fichier, qui

691
00:30:10,310 --> 00:30:16,180
est cette ligne ici, il est essentiellement
itération sur le haut HTML

692
00:30:16,180 --> 00:30:19,880
en bas, de gauche à droite, à la recherche de
des choses comme balises d'images ou d'autres balises

693
00:30:19,880 --> 00:30:23,160
qui mentionnent que d'autres fichiers et
quand il les voit, va et les récupère

694
00:30:23,160 --> 00:30:26,050
via HTTP, tout viable
enveloppe métaphore,

695
00:30:26,050 --> 00:30:29,670
et les affiche ensuite dans le
emplacement approprié dans la page Web.

696
00:30:29,670 --> 00:30:33,370
>> Mais remarquez ici si je me concentre sur
les premiers chats lancer, recherche,

697
00:30:33,370 --> 00:30:37,090
remarquer que, bien qu'il utilise HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
Et malheureusement, Google
Chrome dès maintenant en version 39

699
00:30:41,690 --> 00:30:45,110
est une sorte de nivellement par le bas des choses et
pas nous montrer les têtes réels.

700
00:30:45,110 --> 00:30:49,680
Mais ce qui a été effectivement envoyé une demande
pour ne pas réduire, mais / search? q = chats.

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

702
00:30:52,830 --> 00:30:54,340
>> Maintenant, pourquoi est-ce important?

703
00:30:54,340 --> 00:30:57,110
Eh bien, je vais conclure
de ce que si vous Google

704
00:30:57,110 --> 00:31:01,520
supporte les requêtes de cette forme, pourquoi
puis-je mettre pas ma propre recherche

705
00:31:01,520 --> 00:31:06,420
moteur pour CS50, mais juste l'avant
fin, il suffit de l'interface utilisateur graphique.

706
00:31:06,420 --> 00:31:09,610
Et nous allons confier l'extrémité arrière,
la recherche que les résultats réels de Google.

707
00:31:09,610 --> 00:31:10,510
>> Alors, comment puis-je faire cela?

708
00:31:10,510 --> 00:31:13,820
Eh bien, laissez-moi aller dans gedit ici.

709
00:31:13,820 --> 00:31:19,180
Et laissez-moi aller de l'avant et ouvre
jusqu'à, disons, un nouveau fichier.

710
00:31:19,180 --> 00:31:22,280
Et je vais enregistrer cette
temporairement recherche-0.html.

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

712
00:31:25,111 --> 00:31:27,860
Et puis finalement, nous allons rapidement
avant à celui que je pré-établi.

713
00:31:27,860 --> 00:31:30,190
>> Et je vais
fouetter rapidement le type de doc

714
00:31:30,190 --> 00:31:33,840
html parenthèse ouverte html
près html de support.

715
00:31:33,840 --> 00:31:38,390
Ensuite, je vais faire la tête
proche de tête titre ouvert CS50

716
00:31:38,390 --> 00:31:40,150
Recherche à la place de la recherche Google.

717
00:31:40,150 --> 00:31:43,480
Ici-bas, je vais devoir
le corps, ici-bas près du corps.

718
00:31:43,480 --> 00:31:45,835
Et maintenant je dois CS50 Recherche.

719
00:31:45,835 --> 00:31:47,710
Et effectivement, nous allons
construire ce progressivement.

720
00:31:47,710 --> 00:31:51,043
Je vais aller de l'avant et de fermer ce et
en fait mettre dans mon répertoire public.

721
00:31:51,043 --> 00:31:52,730
Alors donnez-moi un instant.

722
00:31:52,730 --> 00:31:55,390
recherche-0.html-- je vais
temporellement appeler search.html.

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

724
00:31:56,600 --> 00:31:59,750
Je vais faire un chmod un search.html + r.

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

726
00:32:01,072 --> 00:32:02,280
Et maintenant, je vais ouvrir.

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

728
00:32:03,224 --> 00:32:04,390
Très bien, donc ça a été rapide.

729
00:32:04,390 --> 00:32:06,800
Mais le but était simplement
de nous faire le point

730
00:32:06,800 --> 00:32:09,630
ayant de ce texte
fichier appelé search.html.

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

732
00:32:10,940 --> 00:32:12,790
Donc pas grand chose à voir encore.

733
00:32:12,790 --> 00:32:16,970
En effet, si je vais à mon navigateur, et
aller à search.html, qui est tout ce qu'il est.

734
00:32:16,970 --> 00:32:17,720
Mais vous savez quoi?

735
00:32:17,720 --> 00:32:19,000
Je peux être un peu amateur.

736
00:32:19,000 --> 00:32:22,710
Je lis dans un livre qu'il ya
une étiquette de titre appelé h1.

737
00:32:22,710 --> 00:32:26,100
Et je vais aller de l'avant et
utiliser que h1 h1 ouverture et de fermeture.

738
00:32:26,100 --> 00:32:27,220
Recharger la page.

739
00:32:27,220 --> 00:32:29,600
Et maintenant, il est plus grand et plus audacieux,
pas tout à fait intéressant,

740
00:32:29,600 --> 00:32:32,399
mais au moins il structurellement
plus intéressant.

741
00:32:32,399 --> 00:32:33,940
Mais maintenant, laissez-moi vous présenter une autre étiquette.

742
00:32:33,940 --> 00:32:36,500
Il se trouve qu'il ya une balise form.

743
00:32:36,500 --> 00:32:38,400
Et permettez-moi de conclure ce tag.

744
00:32:38,400 --> 00:32:40,830
Et il se trouve qu'il ya
une balise d'entrée

745
00:32:40,830 --> 00:32:44,600
a un attribut appelé type, qui
est le type de champ de données,

746
00:32:44,600 --> 00:32:45,200
si vous voulez.

747
00:32:45,200 --> 00:32:47,050
Et va être de type texte.

748
00:32:47,050 --> 00:32:52,200
Et sa valeur va
être CS50 Recherche.

749
00:32:52,200 --> 00:32:53,850
Fermer étiquette.

750
00:32:53,850 --> 00:32:57,100
Et il va y avoir aucune notion de
ouverture et de fermeture avec séparer les tags.

751
00:32:57,100 --> 00:33:00,300
>> Permettez-moi de revenir ici et
voir ce qui se passe, recharger.

752
00:33:00,300 --> 00:33:01,380
Obtenir intéressant.

753
00:33:01,380 --> 00:33:02,950
On dirait qu'il est un champ de texte.

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

755
00:33:04,080 --> 00:33:06,999
Et en fait, je ne voulais pas
de mettre une valeur encore là.

756
00:33:06,999 --> 00:33:10,040
Permettez-moi de revenir ici et obtenez réellement
débarrasser de cette valeur à garder les choses simples.

757
00:33:10,040 --> 00:33:12,939
Au lieu d'une valeur, ce que je voulais
de donner à cette chose était un nom.

758
00:33:12,939 --> 00:33:15,230
Et je ne sais pas ce qu'elle est,
donc je vais y revenir.

759
00:33:15,230 --> 00:33:18,270
>> Mais en dessous, je veux
à faire input type = soumettre.

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

761
00:33:19,840 --> 00:33:22,120
Et cette valeur sera CS50 Recherche.

762
00:33:22,120 --> 00:33:24,850
Et nous verrons pourquoi je
déplacé de la valeur à cette.

763
00:33:24,850 --> 00:33:28,900
Quand je recharge, il me semble avoir maintenant
Les débuts de ma propre recherche

764
00:33:28,900 --> 00:33:30,820
moteur, super hideux,
mais franchement, il est

765
00:33:30,820 --> 00:33:34,260
pas un jet loin de ce que
Défaut la page de Google ressemble.

766
00:33:34,260 --> 00:33:37,950
>> Si je vais là maintenant, je peux taper dans
les chats et nous espérons cliquez sur Rechercher.

767
00:33:37,950 --> 00:33:40,380
Mais je ne suis pas encore tout à fait fini,
parce que je ne l'ai pas mis en œuvre,

768
00:33:40,380 --> 00:33:41,045
de toute évidence, une base de données.

769
00:33:41,045 --> 00:33:42,940
Je ne l'ai pas exploré la
Web pour obtenir des résultats de recherche.

770
00:33:42,940 --> 00:33:44,840
Je dois donc externaliser à Google.

771
00:33:44,840 --> 00:33:46,290
Alors, comment puis-je faire?

772
00:33:46,290 --> 00:33:49,170
>> Eh bien, tout d'abord je
besoin d'ajouter et d'action

773
00:33:49,170 --> 00:33:58,460
attribuer à ma forme balise
est http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
Et je sais que d'avoir seulement
déduire en regardant de près

775
00:34:01,180 --> 00:34:02,505
à leur URL.

776
00:34:02,505 --> 00:34:03,380
Et maintenant prendre une supposition.

777
00:34:03,380 --> 00:34:09,090
Qu'est-ce que ce champ de texte devrait probablement
être appelé, sur la base d'où nous venons

778
00:34:09,090 --> 00:34:09,754
avant?

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

780
00:34:11,896 --> 00:34:13,290
>> PUBLIC: q.

781
00:34:13,290 --> 00:34:14,370
>> DAVID J Malan: q.

782
00:34:14,370 --> 00:34:17,800
Et nous ne sommes pas réellement besoin question
marquer il se trouve, mais q est en effet il,

783
00:34:17,800 --> 00:34:20,489
q pour la requête probablement par
défaut, juste parce que ce

784
00:34:20,489 --> 00:34:23,060
ce que Larry et Sergey
venu il ya des années.

785
00:34:23,060 --> 00:34:24,739
Alors maintenant, permettez-moi de recharger cette page.

786
00:34:24,739 --> 00:34:26,409
Il ne semble pas si différent.

787
00:34:26,409 --> 00:34:28,120
Mais maintenant regarder ce qui se passe.

788
00:34:28,120 --> 00:34:32,360
>> Si je tape dans les chats et cliquez
CS50 Recherche et de laisser aller,

789
00:34:32,360 --> 00:34:35,770
remarque je suis battu
loin de réelle Google.

790
00:34:35,770 --> 00:34:38,150
Maintenant, Google est d'être un peu
ennuyeux en ce qu'ils sont

791
00:34:38,150 --> 00:34:41,877
ajoutant un paramètre supplémentaire,
si vous voulez, à l'URL.

792
00:34:41,877 --> 00:34:43,960
Voilà tout événement
automatiquement sur le côté de Google.

793
00:34:43,960 --> 00:34:48,730
>> L'important est que je crois
avoir généré cette demande ici.

794
00:34:48,730 --> 00:34:50,179
Et, en effet, que ce qui arrive.

795
00:34:50,179 --> 00:34:53,040
Lorsque vous avez HTML
ressemble à ceci, ce

796
00:34:53,040 --> 00:34:57,620
est une sorte de notation des développeurs web
pour dire, aller de l'avant et créer une forme

797
00:34:57,620 --> 00:34:59,990
que quand il est soumis,
il va aller à cette URL.

798
00:34:59,990 --> 00:35:03,430
Et lorsque l'URL a fourni
valeurs pour des choses comme q,

799
00:35:03,430 --> 00:35:05,440
ne vont pas seulement à cette URL.

800
00:35:05,440 --> 00:35:08,210
En fait, passez à la question
marque et alors q = chats.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Ajoutez le paramètre, le
paramètre HTTP comme ça.

803
00:35:13,060 --> 00:35:15,590
>> Et juste pour être super précis,
Ce qui est déduit ici--

804
00:35:15,590 --> 00:35:18,130
mais je serai plus explicit-- est
que la méthode que je veux utiliser

805
00:35:18,130 --> 00:35:22,270
est d'obtenir, au lieu de quelque chose comme
après, que nous allons finalement voir.

806
00:35:22,270 --> 00:35:27,710
Donc en bref, simplement en compréhension
HTML et en utilisant certaines balises assez simples,

807
00:35:27,710 --> 00:35:30,610
nous pouvons maintenant commencer à créer
notre propre utilisateur final avant

808
00:35:30,610 --> 00:35:32,850
interface avec une recherche
Moteur derrière elle.

809
00:35:32,850 --> 00:35:34,800
>> Mais bien sûr, ceci est assez hideux.

810
00:35:34,800 --> 00:35:37,259
Alors permettez-moi d'ouvrir effectivement en place
un peu meilleure version.

811
00:35:37,259 --> 00:35:39,800
Ceci est celui que je préparais en
avancer qui a des commentaires.

812
00:35:39,800 --> 00:35:41,900
Mais vous verrez que je
à peu près recréé.

813
00:35:41,900 --> 00:35:44,150
Donc, ce qui est déjà disponible en ligne.

814
00:35:44,150 --> 00:35:48,050
Et je ne suis d'préventivement
aller à https juste pour garder les choses simples.

815
00:35:48,050 --> 00:35:50,610
>> Et maintenant, nous allons ouvrir une
prochaine itération de cette.

816
00:35:50,610 --> 00:35:52,510
Est la version 1 au lieu de 0.

817
00:35:52,510 --> 00:35:55,315
Qu'est-ce que vous saute au visage comme légèrement
différent dans cet exemple?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> PUBLIC: [inaudible].

820
00:36:00,440 --> 00:36:03,020
>> Ouais, il ya ce centre d'alignement de texte.

821
00:36:03,020 --> 00:36:04,590
Ceci est un peu bizarre ici.

822
00:36:04,590 --> 00:36:06,150
Mais cette nouvelle est en effet.

823
00:36:06,150 --> 00:36:07,800
Et peut-être deviner ce qui va se passer.

824
00:36:07,800 --> 00:36:11,730
Si je vais à mon navigateur maintenant
et visiter la recherche-1.html,

825
00:36:11,730 --> 00:36:13,090
il est presque la même chose.

826
00:36:13,090 --> 00:36:15,705
Mais il est un pas de plus vers
être un peu plus joli.

827
00:36:15,705 --> 00:36:19,150
Il est toujours laid, mais plus joli que dans
au moins tout est maintenant centré.

828
00:36:19,150 --> 00:36:23,470
>> Donc, il se trouve que ce que je suis en utilisant
est tout à fait une autre langue appelée

829
00:36:23,470 --> 00:36:25,680
CSS, feuilles de style en cascade.

830
00:36:25,680 --> 00:36:28,310
Et CSS, franchement, est en quelque sorte
de, à mon avis personnel,

831
00:36:28,310 --> 00:36:29,775
une langue atrocement conçu.

832
00:36:29,775 --> 00:36:33,110
Il est très ennuyeux de se rappeler
tous les différents détails.

833
00:36:33,110 --> 00:36:38,479
Mais il est ce qui stylise la
tout le Web dans le monde entier aujourd'hui.

834
00:36:38,479 --> 00:36:39,270
Je offensé quelqu'un.

835
00:36:39,270 --> 00:36:39,769
Bien.

836
00:36:39,769 --> 00:36:43,180
Donc revenons ici et voir
la façon dont nous sommes en train de l'utilisation de ce.

837
00:36:43,180 --> 00:36:45,940
Et il se trouve, au moins il est
en fait un langage assez simple.

838
00:36:45,940 --> 00:36:49,470
Il est juste de paires clé-valeur, les propriétés
et les valeurs, les propriétés et les valeurs.

839
00:36:49,470 --> 00:36:52,080
En effet, voici un
ces biens et de la valeur.

840
00:36:52,080 --> 00:36:55,890
>> Simplement en utilisant le style
attribuer sur ma balise body

841
00:36:55,890 --> 00:37:00,360
et ce qui donne une valeur de un
mot colon et un autre mot,

842
00:37:00,360 --> 00:37:03,730
ou une propriété et une valeur,
Je peux affecter l'esthétique

843
00:37:03,730 --> 00:37:06,210
de la page Web, et non
encore nécessairement la structure,

844
00:37:06,210 --> 00:37:07,550
mais l'esthétique de ce.

845
00:37:07,550 --> 00:37:10,960
Et par googler autour, je me rends compte
que les feuilles CSS, style en cascade,

846
00:37:10,960 --> 00:37:14,170
soutient une propriété appelée
text-align, dont la valeur peut

847
00:37:14,170 --> 00:37:16,980
être à gauche, à droite ou au centre, par exemple.

848
00:37:16,980 --> 00:37:19,990
>> Alors maintenant, quand je recharge
cette page, ce que je ne se

849
00:37:19,990 --> 00:37:22,730
était une page centrée,
mais encore assez laid.

850
00:37:22,730 --> 00:37:25,770
Allons de l'avant et ouvrir
jusqu'à la version 2 de Recherche.

851
00:37:25,770 --> 00:37:28,570
Et remarque maintenant que je l'ai fait un peu plus.

852
00:37:28,570 --> 00:37:33,760
Notez que ici à l'intérieur de la tête
tag, il peut y avoir plus de titre.

853
00:37:33,760 --> 00:37:35,400
En fait, il ya une balise de style.

854
00:37:35,400 --> 00:37:38,630
Et là il est juste un
peu désordonné vision CSS parfois.

855
00:37:38,630 --> 00:37:41,971
>> Notez que je semble avoir quelque chose
qui ressemble structurellement très différent.

856
00:37:41,971 --> 00:37:44,095
Mais ici est le nom de
la balise je veux stylisée.

857
00:37:44,095 --> 00:37:47,570
Voici nos vieux amis bouclés
accolades et accolade fermée.

858
00:37:47,570 --> 00:37:50,290
Et puis ici est que
propriété et sa valeur.

859
00:37:50,290 --> 00:37:56,300
>> Si je charge ce fichier, search2.html,
le résultat est identique.

860
00:37:56,300 --> 00:37:59,300
Mais il est une étape vers une meilleure conception.

861
00:37:59,300 --> 00:38:04,560
En tenant cette CSS, je l'ai
pas mélangés avec mon HTML.

862
00:38:04,560 --> 00:38:07,560
Et en effet, comme nous le verrons, je pouvais
réutiliser ces propriétés et les valeurs.

863
00:38:07,560 --> 00:38:10,420
Si je voulais faire des bouquets de
parties de ma page web centrés,

864
00:38:10,420 --> 00:38:13,630
Je ne dois pas taper style = text-align
centre partout.

865
00:38:13,630 --> 00:38:16,580
Je peux mettre dans un seul endroit
peut-être, tiens au sommet.

866
00:38:16,580 --> 00:38:18,210
>> Mais même cela ne le meilleur design.

867
00:38:18,210 --> 00:38:21,720
En fait, une des choses que vous apprendrez
que vous passez plus de temps avec

868
00:38:21,720 --> 00:38:25,730
programmation web est que plus vous pouvez
modularisation des choses et des choses de factoriser

869
00:38:25,730 --> 00:38:30,610
comme les fichiers .h nous facteur trucs,
helpers.c souhaitez nous laisser les choses de factoriser

870
00:38:30,610 --> 00:38:31,880
il ya quelques psets.

871
00:38:31,880 --> 00:38:34,200
De même, pourrions-nous
vouloir atteindre cet objectif.

872
00:38:34,200 --> 00:38:37,920
>> Donc remarquer dans la version
trois search.html je l'ai

873
00:38:37,920 --> 00:38:40,610
nettoyé la tête de
la page et vient de mettre

874
00:38:40,610 --> 00:38:43,320
en cela, une étiquette de lien, qui
contrairement à son nom,

875
00:38:43,320 --> 00:38:44,700
ne vous donne pas un lien hypertexte.

876
00:38:44,700 --> 00:38:49,150
Il est relié à un autre fichier par le biais de
un href dont la valeur, dans ce cas,

877
00:38:49,150 --> 00:38:51,586
est la recherche-3.css

878
00:38:51,586 --> 00:38:52,960
Donc, je me rends compte que nous allons rapidement.

879
00:38:52,960 --> 00:38:54,600
Mais tout ce que je fais est un peu
de déplacer des choses.

880
00:38:54,600 --> 00:38:55,760
Laissez-moi libre recherche-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Ça y est, rien de vraiment à elle.

883
00:38:58,530 --> 00:39:02,270
Je viens de copier et collé dans un nouveau
dossier, tout comme nous affacturées trucs

884
00:39:02,270 --> 00:39:03,509
dans d'autres fichiers avant.

885
00:39:03,509 --> 00:39:05,300
Et la result--
complètement underwhelming--

886
00:39:05,300 --> 00:39:06,730
va être exactement la même.

887
00:39:06,730 --> 00:39:10,490
Mais nous allons de l'toward-- non, il est pas.

888
00:39:10,490 --> 00:39:11,930
Oh, je sais pourquoi.

889
00:39:11,930 --> 00:39:13,790
>> Il semble donc y avoir un bug.

890
00:39:13,790 --> 00:39:15,010
Et il est dans un certain sens.

891
00:39:15,010 --> 00:39:17,730
Mais laissez-moi ouvrir mon onglet Réseau.

892
00:39:17,730 --> 00:39:19,660
Permettez-moi de recharger la page.

893
00:39:19,660 --> 00:39:23,315
Ah, pourquoi le CSS ne sont pas appliquées?

894
00:39:23,315 --> 00:39:26,920
Eh bien, le fichier CSS, de même, a
pour être lisible monde, pour ainsi dire.

895
00:39:26,920 --> 00:39:28,440
Et il est trop actuellement interdit.

896
00:39:28,440 --> 00:39:33,760
Alors permettez-moi de faire un chmod a + r
des étoiles dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
nous sommes point CSS est que le
extension de fichier pour les fichiers CSS.

898
00:39:37,067 --> 00:39:38,900
Maintenant, permettez-moi de revenir à
mon navigateur et recharge.

899
00:39:38,900 --> 00:39:40,910
OK, un peu mieux.

900
00:39:40,910 --> 00:39:42,282
>> Maintenant, permettez-moi de faire une dernière chose.

901
00:39:42,282 --> 00:39:42,990
A la recherche-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Je dispose d'une version que je pensais juste
était plus cool, quoique de manière plus

904
00:39:48,220 --> 00:39:48,980
compliqué.

905
00:39:48,980 --> 00:39:50,690
Regardons d'abord le résultat.

906
00:39:50,690 --> 00:39:52,290
Fermer cette de nous donner plus de place.

907
00:39:52,290 --> 00:39:54,275
Changez-la en recherche-4, Entrée.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> Et maintenant un tas de choses sont cassées.

910
00:39:57,200 --> 00:39:59,910
Je vais revenir
dans mon répertoire ici.

911
00:39:59,910 --> 00:40:04,190
Et maintenant, je vais juste faire
un chmod a + r sur un file--

912
00:40:04,190 --> 00:40:07,450
parce que je sais que ce exists-- appelé
logo.gif, qui est une image.

913
00:40:07,450 --> 00:40:08,590
Et maintenant recharger.

914
00:40:08,590 --> 00:40:11,040
Et wow-- alors maintenant je suis
assez proche, franchement,

915
00:40:11,040 --> 00:40:15,860
à aimer la version de 1999 de Google, et
franchement, la version 2014 de Google,

916
00:40:15,860 --> 00:40:16,360
droit?

917
00:40:16,360 --> 00:40:21,920
>> Donc, il est maintenant d'aller à leur site web,
en fin de compte, si je cherche pour les chats.

918
00:40:21,920 --> 00:40:23,900
Et en effet il est.

919
00:40:23,900 --> 00:40:26,410
Mais qu'est-ce que je fais différemment
dans cette version 4?

920
00:40:26,410 --> 00:40:28,020
Donc, nous ne nous attarderons pas trop sur elle ici.

921
00:40:28,020 --> 00:40:30,100
Vous verrez ce problème en
mis sept finalement.

922
00:40:30,100 --> 00:40:31,350
Mais je l'ai remarqué quelques petites choses.

923
00:40:31,350 --> 00:40:33,690
>> Je présenté un div
tag, qui est la division,

924
00:40:33,690 --> 00:40:35,450
dans le même esprit à une balise de paragraphe.

925
00:40:35,450 --> 00:40:38,220
Mais une division est juste comme, voici
une région rectangulaire invisible

926
00:40:38,220 --> 00:40:39,150
de l'écran.

927
00:40:39,150 --> 00:40:41,680
Donnons-lui un unique,
identifiant, un pied de page, juste

928
00:40:41,680 --> 00:40:44,700
afin que nous puissions parler
dans notre HTML ailleurs.

929
00:40:44,700 --> 00:40:47,952
Voici un autre div de la page
dont l'ID va être content.

930
00:40:47,952 --> 00:40:49,160
Il est le contenu de la page.

931
00:40:49,160 --> 00:40:51,090
Et ici est l'en-tête de la page.

932
00:40:51,090 --> 00:40:54,960
>> En d'autres termes, je l'ai
essentiellement en HTML suis mentalement

933
00:40:54,960 --> 00:40:57,700
visualiser cette page web
trois composantes, une tête

934
00:40:57,700 --> 00:41:01,200
ici avec ce rectangle invisible,
la teneur dans le milieu, et ensuite

935
00:41:01,200 --> 00:41:04,800
le pied de page en bas, même
si nous ne voyons pas les choses.

936
00:41:04,800 --> 00:41:09,940
Parce que je veux dans ma tête de
Cette page ici, ou dans un fichier .css,

937
00:41:09,940 --> 00:41:11,460
Je peux utiliser cette syntaxe.

938
00:41:11,460 --> 00:41:13,070
>> Header est pas une étiquette.

939
00:41:13,070 --> 00:41:17,060
Il est un code d'identification, il se
que en faisant #header,

940
00:41:17,060 --> 00:41:20,840
Je peux maintenant appliquer une ou plusieurs
des propriétés à la tête.

941
00:41:20,840 --> 00:41:24,130
Je peux faire le même contenu,
de même pour le contenu ici.

942
00:41:24,130 --> 00:41:27,230
>> Ainsi, par exemple, dans le pied de page, un avis
toutes ces propriétés Je ajout.

943
00:41:27,230 --> 00:41:30,660
Et je sais qu'ils existent seulement par la lecture
sur la documentation de CSS.

944
00:41:30,660 --> 00:41:33,450
Taille de la police va être smaller--
de sorte que certains taille de police relative.

945
00:41:33,450 --> 00:41:34,741
Le poids va être gras.

946
00:41:34,741 --> 00:41:37,340
Margin-- le nombre de pixels
autour it-- est de 20 pixels.

947
00:41:37,340 --> 00:41:38,590
Et ça va être centré.

948
00:41:38,590 --> 00:41:40,256
>> Mais pour l'instant, la page ressemble à ceci.

949
00:41:40,256 --> 00:41:42,840
Si je ne suis pas heureux avec
ma copie là,

950
00:41:42,840 --> 00:41:46,560
Je pouvais faire quelque chose comme la couleur rouge.

951
00:41:46,560 --> 00:41:50,570
Et puis je peux sauver ce, recharger,
et maintenant je l'ai stylisé le pied de page.

952
00:41:50,570 --> 00:41:54,130
Donc, cela est juste allusion à la puissance
de ce que vous pouvez faire dans une page web

953
00:41:54,130 --> 00:41:55,510
de changer les choses autour.

954
00:41:55,510 --> 00:41:59,080
>> Et encore plus cool que cela, si vous voulez
à fouiller avec des sites réels,

955
00:41:59,080 --> 00:42:00,810
vous ne pouvez pas les changer de façon permanente.

956
00:42:00,810 --> 00:42:03,640
Mais si je ouvrir
Inspecteur de Chrome à nouveau

957
00:42:03,640 --> 00:42:07,610
et je vais pas à la gauche
ici, ce qui montre le code HTML de Facebook,

958
00:42:07,610 --> 00:42:11,380
mais montre sur la droite
côté la totalité de son CSS,

959
00:42:11,380 --> 00:42:13,789
vous pouvez soit et
changer les choses à la volée.

960
00:42:13,789 --> 00:42:15,080
Alors laissez-moi aller de l'avant et le faire.

961
00:42:15,080 --> 00:42:18,670
>> Permettez-moi aller de l'avant et de contrôle
cliquez sur ce mot au hasard ici,

962
00:42:18,670 --> 00:42:21,230
signer, puis cliquez sur Vérifier l'élément.

963
00:42:21,230 --> 00:42:25,130
Chrome saute très bien à
la balise h1 que Facebook utilise.

964
00:42:25,130 --> 00:42:27,290
Et remarquez ici Facebook
a en quelque sorte paresseusement

965
00:42:27,290 --> 00:42:29,960
codé en dur la taille comme une propriété ici.

966
00:42:29,960 --> 00:42:33,530
>> Donc, la chose intéressante est que
que si je vais réellement ici

967
00:42:33,530 --> 00:42:39,560
et dire, oh, Facebook, je ne aime pas
64 pixels, nous pouvons maintenant modifier Facebook.

968
00:42:39,560 --> 00:42:42,590
Bien sûr, nous ne faisons que changer
pour moi personnellement en ce moment.

969
00:42:42,590 --> 00:42:45,150
Mais ceci est juste un autre
outil dans notre trousse à outils

970
00:42:45,150 --> 00:42:48,360
cela va nous permettre de peaufiner
et de comprendre et de diagnostiquer aussi

971
00:42:48,360 --> 00:42:49,729
questions dans nos propres pages web.

972
00:42:49,729 --> 00:42:52,270
Et nous pourrions aller de même sur
ici, ce qui est la même chose.

973
00:42:52,270 --> 00:42:55,830
Si vous voulez vraiment obtenir la fantaisie, je
dire, maintenant vous pouvez vraiment muter la page

974
00:42:55,830 --> 00:42:57,380
et faire des choses folles.

975
00:42:57,380 --> 00:42:59,870
>> Alors, pourquoi est-ce tout utile?

976
00:42:59,870 --> 00:43:02,330
Eh bien, en fin de compte, nous sommes
allez vouloir être

977
00:43:02,330 --> 00:43:07,110
en mesure de créer des pages web qui
sont entraînés par nos propres extrémités arrière,

978
00:43:07,110 --> 00:43:10,520
pas seulement par Google et
l'externalisation de la fin là-bas.

979
00:43:10,520 --> 00:43:13,510
Nous voulons en fait la
valeur, par exemple,

980
00:43:13,510 --> 00:43:18,830
de l'action de notre moteur de recherche
attribuer à aller pas à quelqu'un d'autre,

981
00:43:18,830 --> 00:43:24,270
mais à quelque chose comme search.php,
où search.php est sur notre propre serveur,

982
00:43:24,270 --> 00:43:25,670
pas sur quelqu'un d'autre.

983
00:43:25,670 --> 00:43:30,316
>> Et pour y arriver, nous avons effectivement
besoin d'introduire un nouveau langage.

984
00:43:30,316 --> 00:43:33,190
Donc, nous avons déjà examiné une nouvelle
langue ici, ou deux vraiment, HTML

985
00:43:33,190 --> 00:43:33,700
et CSS.

986
00:43:33,700 --> 00:43:36,330
Mais ils sont vraiment juste
langues structurelles et esthétiques.

987
00:43:36,330 --> 00:43:38,360
Ils ne sont pas la programmation
langues en soi.

988
00:43:38,360 --> 00:43:41,160
Et qui est à peu près autant formelle
temps que nous passons sur eux.

989
00:43:41,160 --> 00:43:44,910
Parce que nous allons commencer maintenant
la transition vers PHP.

990
00:43:44,910 --> 00:43:48,160
>> Donc, PHP est un réel
langage de programmation.

991
00:43:48,160 --> 00:43:50,750
Il est un langage de script
dans le sens où il est

992
00:43:50,750 --> 00:43:52,855
censé être plus léger
que quelque chose comme C

993
00:43:52,855 --> 00:43:56,082
Et il est un langage interprété,
ce qui signifie qu'il est pas établie.

994
00:43:56,082 --> 00:43:58,790
Donc, en résumé, ce que cela voulait dire
lorsque nous avons utilisé un langage comme C

995
00:43:58,790 --> 00:44:00,290
et nous avons dû compiler?

996
00:44:00,290 --> 00:44:02,120
Qu'est-ce que cela signifie pour
compiler du code source C?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
PUBLIC: [inaudible].

999
00:44:04,780 --> 00:44:06,184
DAVID J Malan: Dites-le à nouveau?

1000
00:44:06,184 --> 00:44:07,100
PUBLIC: [inaudible].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J Malan: Parfait.

1003
00:44:08,920 --> 00:44:10,180
Il transforme en binaire.

1004
00:44:10,180 --> 00:44:14,200
Il transforme en zéros et de uns
de réelle code source proche de l'anglais.

1005
00:44:14,200 --> 00:44:16,424
Et puis nous pouvons
exécuter ces zéros et de uns

1006
00:44:16,424 --> 00:44:18,840
en les faisant passer à travers le
CPU en double-cliquant sur une icône

1007
00:44:18,840 --> 00:44:19,980
ou exécuter une commande.

1008
00:44:19,980 --> 00:44:23,770
>> PHP et Python et Ruby
et Perl et JavaScript

1009
00:44:23,770 --> 00:44:26,250
et grappes d'autres
langues sont interprétées

1010
00:44:26,250 --> 00:44:29,290
langues, ce qui veut dire
vous ne les compilez pas.

1011
00:44:29,290 --> 00:44:34,220
Au contraire, vous les nourrissez comme entrée
un programme appelé un interprète.

1012
00:44:34,220 --> 00:44:36,640
Et qui interprète,
qui quelqu'un d'autre a écrit,

1013
00:44:36,640 --> 00:44:40,930
lit le code source de haut en bas,
de gauche à droite et seulement interprète

1014
00:44:40,930 --> 00:44:43,000
ces lignes et fait ce que vous dites.

1015
00:44:43,000 --> 00:44:45,360
>> Donc, si vous rencontrez un
ligne qui dit impression,

1016
00:44:45,360 --> 00:44:48,660
il ne convertit pas nécessairement impression
pour les zéros et de uns correspondant.

1017
00:44:48,660 --> 00:44:51,910
Il a juste cette interprète comme
un grand état, si celui dit,

1018
00:44:51,910 --> 00:44:56,110
si l'instruction de programmeur est
impression, puis procédez comme suit.

1019
00:44:56,110 --> 00:44:58,170
Donc, il l'interprète juste
par type de raisonnement

1020
00:44:58,170 --> 00:44:59,800
par ce que vous lui disant de faire.

1021
00:44:59,800 --> 00:45:01,320
>> Et PHP est une de ces langues.

1022
00:45:01,320 --> 00:45:05,310
Et il ya PHP ans a été conçu
précisément pour la programmation web.

1023
00:45:05,310 --> 00:45:08,160
Et ce fut d'abord un
langue désordre très bâclée.

1024
00:45:08,160 --> 00:45:10,940
Et en effet, il ya une énorme
quantité de mauvais code PHP là-bas.

1025
00:45:10,940 --> 00:45:13,520
Mais la langue elle-même
a mûri au fil des ans,

1026
00:45:13,520 --> 00:45:16,200
tant et si bien que maintenant il est
en fait une merveilleuse étape suivante

1027
00:45:16,200 --> 00:45:19,970
pédagogique de C parce qu'il est
si sacrément familier à tout

1028
00:45:19,970 --> 00:45:22,380
vous avez vu au cours des dernières semaines.

1029
00:45:22,380 --> 00:45:25,724
>> La seule différence initiale, nous verrons
est il n'y a pas la fonction principale plus.

1030
00:45:25,724 --> 00:45:28,890
Lorsque vous démarrez l'écriture de code, il est juste
va se faire exécuter, peu importe ce que,

1031
00:45:28,890 --> 00:45:30,220
comme nous le verrons dans un instant.

1032
00:45:30,220 --> 00:45:33,320
En attendant, voici ce que un
variables ressemble en PHP.

1033
00:45:33,320 --> 00:45:35,840
Il est un peu différent,
mais à peine.

1034
00:45:35,840 --> 00:45:39,380
>> En PHP, il n'y a pas de typage fort.

1035
00:45:39,380 --> 00:45:41,430
Il ya semaine dactylographie,
ce qui signifie juste là

1036
00:45:41,430 --> 00:45:44,030
sont des types de données comme les chaînes
et nombre d'autres choses.

1037
00:45:44,030 --> 00:45:47,030
Mais vous ne vous souciez pas spécifier
ce qu'ils sont plus.

1038
00:45:47,030 --> 00:45:48,980
PHP figure it out pour vous.

1039
00:45:48,980 --> 00:45:52,030
Le symbole du dollar est juste une décision
que les personnes PHP faites ans

1040
00:45:52,030 --> 00:45:54,890
il ya de telle sorte que toute variable en PHP
juste commence par un signe de dollar.

1041
00:45:54,890 --> 00:45:58,130
Il est en fait assez utile dans ce
il vous saute au visage un peu plus.

1042
00:45:58,130 --> 00:46:01,315
>> Mais après cela, ce
est une condition dans PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Ce qui est différent par rapport à C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- rien,
qui est effectivement très belle.

1047
00:46:09,600 --> 00:46:12,140
Expressions booléennes dans PHP-- la même.

1048
00:46:12,140 --> 00:46:19,354
Expressions booléennes avec et contre
ou, interrupteurs, des boucles, des boucles, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
celui-ci est différent.

1050
00:46:20,270 --> 00:46:22,660
>> Donc, il se trouve qu'il ya une
quelques autres fonctionnalités de PHP.

1051
00:46:22,660 --> 00:46:25,243
L'un d'eux est en fait présent,
qui est merveilleusement pratique.

1052
00:46:25,243 --> 00:46:29,250
Si $ nombre est un tableau que vous avez
déclaré précédemment dans un programme,

1053
00:46:29,250 --> 00:46:33,350
vous avez cette fantaisie pour chaque construction
qu'au lieu de faire tout cela

1054
00:46:33,350 --> 00:46:37,020
Je ennuyeux est égal à 0, I est
moins que cela, [? I ++?],

1055
00:46:37,020 --> 00:46:40,320
pour chacun des nombres que le nombre, où chaque
de ces valeurs de signe de dollar est juste

1056
00:46:40,320 --> 00:46:42,790
une variable, et le second
vous pouvez penser que I.

1057
00:46:42,790 --> 00:46:44,290
Vous pourriez l'appeler ce que vous voulez.

1058
00:46:44,290 --> 00:46:45,770
Je l'ai appelé nombre.

1059
00:46:45,770 --> 00:46:48,825
Cela va parcourir
le tableau numéros appelés.

1060
00:46:48,825 --> 00:46:51,200
Et à chaque itération, il est
va mettre à jour automatiquement

1061
00:46:51,200 --> 00:46:54,340
pour vous le nombre de signe dollar
variable de sorte que vous constamment

1062
00:46:54,340 --> 00:46:58,210
avoir accès à la variable que vous souhaitez
sans avoir à faire un crochet

1063
00:46:58,210 --> 00:47:00,980
notation ou d'indexation dans un tableau.

1064
00:47:00,980 --> 00:47:04,950
>> Au-delà de cela, nous avons même des choses comme
tableaux, qui ressemblent presque la même,

1065
00:47:04,950 --> 00:47:08,210
sauf qu'il est très commun, comme nous allons
voir, à la fois en PHP et JavaScript

1066
00:47:08,210 --> 00:47:10,750
à initialiser un tableau pré
utilisant les crochets.

1067
00:47:10,750 --> 00:47:12,040
C utilise les accolades.

1068
00:47:12,040 --> 00:47:15,330
Donc, il est un peu différent, même si
nous ne sommes pas vraiment utilisé ce truc bien.

1069
00:47:15,330 --> 00:47:20,090
>> Mais encore plus de force,
PHP dispose de tableaux associatifs,

1070
00:47:20,090 --> 00:47:23,100
qui est une façon élégante
de dire les tables de hachage.

1071
00:47:23,100 --> 00:47:31,610
En fait, si vous voulez déclarer une table de hachage
tableau en PHP, contrairement à C-- combien

1072
00:47:31,610 --> 00:47:34,775
lignes de code at-il fallu pour
effectivement mettre en œuvre une table de hachage en C?

1073
00:47:34,775 --> 00:47:38,310
Ou le nombre de lignes de code est il
prendre pour mettre en œuvre une table de hachage en C?

1074
00:47:38,310 --> 00:47:39,820
Donc, il est probablement beaucoup, non?

1075
00:47:39,820 --> 00:47:41,680
Il est à quelques dizaines, peut-être 100 ou 200.

1076
00:47:41,680 --> 00:47:42,980
Il est non triviale.

1077
00:47:42,980 --> 00:47:45,420
Ou il est sur le point d'être, comme
vous verrez bientôt, non triviale

1078
00:47:45,420 --> 00:47:48,080
à mettre en oeuvre une table de hachage
[Inaudible] et également un essai.

1079
00:47:48,080 --> 00:47:50,580
Mais dans PHP-- et franchement, je
ne devrait probablement pas vous dire ce

1080
00:47:50,580 --> 00:47:53,630
jusqu'à Monday-- en PHP, si
vous voulez une table, fait.

1081
00:47:53,630 --> 00:47:56,431
Voilà un hachage table-- si
avec une ligne de code.

1082
00:47:56,431 --> 00:47:56,930
Et

1083
00:47:56,930 --> 00:47:58,810
>> Un grand nombre de langues le faire.

1084
00:47:58,810 --> 00:48:00,190
Amusez-vous avec pset cinq.

1085
00:48:00,190 --> 00:48:01,980
Donc, beaucoup de langues le faire.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Ils vous donnent ces abstractions
que d'autres personnes, d'autres programmeurs,

1088
00:48:06,140 --> 00:48:09,870
ont créé pour vous afin que
vous pouvez vous tenir sur leurs épaules

1089
00:48:09,870 --> 00:48:13,290
et commencer à utiliser les idées qui sont super
impérieux, comme les tables et les arbres hachage

1090
00:48:13,290 --> 00:48:14,140
et tente.

1091
00:48:14,140 --> 00:48:17,790
Mais vous ne devez pas nécessairement
mettre en œuvre ces choses vous-même.

1092
00:48:17,790 --> 00:48:20,850
>> Et si en fin de compte, ce
nous allons utiliser PHP pour

1093
00:48:20,850 --> 00:48:23,580
est potentiellement l'écriture de programmes
de la ligne dite commande.

1094
00:48:23,580 --> 00:48:26,600
Nous pourrions recréer chaque programme
nous avons écrit ce semestre à ce jour,

1095
00:48:26,600 --> 00:48:30,410
sauf peut-être en petits groupes qui utilise SPL,
qui est spécifique à C pour le moment.

1096
00:48:30,410 --> 00:48:33,100
Mais tous les autres problèmes mis,
certainement Mario et César

1097
00:48:33,100 --> 00:48:35,300
et Vigenère et
[? Crack?] Et au-delà, nous

1098
00:48:35,300 --> 00:48:39,520
pourrait ré-implémenter en PHP, et
sans doute un peu plus facilement.

1099
00:48:39,520 --> 00:48:43,050
>> Mais ce que nous allons finalement
d'utiliser PHP pour la programmation web est.

1100
00:48:43,050 --> 00:48:46,420
Et nous allons mettre en place prochaine
semaine un modèle mental, un paradigme appelé

1101
00:48:46,420 --> 00:48:49,610
MVC, vue du modèle contrôleur,
qui, si vous avez fait la programmation

1102
00:48:49,610 --> 00:48:51,610
avant ou en Python
Ruby ou ailleurs, vous

1103
00:48:51,610 --> 00:48:54,112
pourrait connaître de cette équipe avec
Rails et Django et autres.

1104
00:48:54,112 --> 00:48:55,820
Mais si vous êtes nouveau
cela aussi, vous verrez

1105
00:48:55,820 --> 00:48:59,652
que ce soit réellement une très naturel
extension de la factorisation

1106
00:48:59,652 --> 00:49:01,360
et le genre de conception
de code que nous avons

1107
00:49:01,360 --> 00:49:04,670
été fait en C. Nous allons maintenant
appliquer certaines de ces leçons à PHP

1108
00:49:04,670 --> 00:49:07,190
de sorte que finalement, nous sommes
mise en œuvre de nos propres sites Web.

1109
00:49:07,190 --> 00:49:09,080
Et si vous êtes en quelque sorte
hypnotisé ou étonné

1110
00:49:09,080 --> 00:49:10,954
que nous allons faire
tous les si vite,

1111
00:49:10,954 --> 00:49:13,410
se rendre compte que presque tous les
semestre, près de 90%

1112
00:49:13,410 --> 00:49:16,560
des étudiants, y compris ceux CS50
qui ont jamais programmé avant,

1113
00:49:16,560 --> 00:49:20,329
finir par faire des projets définitifs qui
sont basés sur la programmation web.

1114
00:49:20,329 --> 00:49:23,120
Et vous verrez que les rendements
sont élevés dans les semaines à venir.

1115
00:49:23,120 --> 00:49:24,965
Nous allons donc vous voir ensuite le lundi.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> ENCEINTE 1: Et maintenant, Deep
Thoughts par Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Les tables de hachage.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Rires]

1122
00:49:38,402 --> 00:49:38,902