1
00:00:00,000 --> 00:00:03,486
>> [Musikwiedergabe]

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

3
00:00:10,460 --> 00:00:14,250
>> DAVID J MALAN: Dies ist CS50 und
Dies ist der Beginn der Woche 7.

4
00:00:14,250 --> 00:00:15,060
So begrüßen Sie zurück.

5
00:00:15,060 --> 00:00:17,540
Und Sie können daran erinnern
in Problem stellte vier,

6
00:00:17,540 --> 00:00:21,510
Es war ein bisschen wie eine Schnitzeljagd
für einige tolle Preise, wobei

7
00:00:21,510 --> 00:00:24,219
nachdem Sie erholen Fotos an
Mitarbeiter sowohl hier als auch in New Haven,

8
00:00:24,219 --> 00:00:27,468
Sie wurden aufgefordert, so viele zu finden
diese Informatiker wie Sie können.

9
00:00:27,468 --> 00:00:29,550
Und wir haben eine ganze habe
Bündel von Einreichungen.

10
00:00:29,550 --> 00:00:31,930
Dachte, ich würde ein paar teilen
heute hier bei Ihnen.

11
00:00:31,930 --> 00:00:35,100
>> Und wir werden alle diese online zu stellen.

12
00:00:35,100 --> 00:00:39,310
Aber vor allem wollte ich
machen Sie darauf aufmerksam zu-- auch eine,

13
00:00:39,310 --> 00:00:42,670
Sam war in einem ganz wenige von ihnen
Regel posiert wie diese.

14
00:00:42,670 --> 00:00:45,750
Aber es scheint, dass ab
an diesem Morgen, der Gewinner

15
00:00:45,750 --> 00:00:51,170
wurde ein gewisser jemand namens Ken mit
24 des Statuts der Kamera eingefangen

16
00:00:51,170 --> 00:00:54,600
oder ein paar mehr, wenn Sie in zu nehmen
Konto mehrere Mitarbeiter in den Bildern.

17
00:00:54,600 --> 00:00:58,300
Abgebildet ist Ken nächsten
Maria in New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Jetzt, Ken, obwohl, dreht
Sie ist wenig eine Ecke Fall

19
00:01:01,300 --> 00:01:02,880
das ist noch nicht vorgekommen.

20
00:01:02,880 --> 00:01:05,713
Es stellt sich heraus, daß sie nicht auftreten,
mir Kleingedruckte in Problem setzen

21
00:01:05,713 --> 00:01:09,710
Set vier, die besagt, dass Mitarbeiter sind
nicht für die tolle Preise

22
00:01:09,710 --> 00:01:13,130
weil Ken ist natürlich einer von
die Fotografen auf unsere Mitarbeiter.

23
00:01:13,130 --> 00:01:16,820
Jetzt, mit dieser sagte, er
Ursprünglich schrieb mir zu sagen,

24
00:01:16,820 --> 00:01:19,180
bitte nicht, diese Fotos online zu stellen.

25
00:01:19,180 --> 00:01:21,630
Ich denke, zu einem großen Teil
weil die meisten der Fotos

26
00:01:21,630 --> 00:01:24,499
dass dieser Fotograf machte betrachten
ein wenig so etwas wie dieses.

27
00:01:24,499 --> 00:01:25,040
Und dergleichen.

28
00:01:25,040 --> 00:01:28,990
>> Aber Ken möchten, dass ich Ihnen versichern,
, dass er ein sehr guter Fotograf,

29
00:01:28,990 --> 00:01:33,190
Er ist ein professioneller, nimmt er
Fotos, die nicht verschwommen sind,

30
00:01:33,190 --> 00:01:37,270
, die besser im Fokus stehen, und er
dauerte ein paar von unseren eigenen Mitarbeitern.

31
00:01:37,270 --> 00:01:40,370
Aber anstatt nur zu bestätigen
Ken, was wir dachten, wir würden zu tun

32
00:01:40,370 --> 00:01:43,390
wird durch die Liste der go
tatsächliche Studenten, die eingereicht.

33
00:01:43,390 --> 00:01:48,640
Und es stellt sich heraus, dass Lance mit
15 Fotos von heute morgen

34
00:01:48,640 --> 00:01:50,030
war unser Favorit.

35
00:01:50,030 --> 00:01:55,730
>> Und hier dargestellt wird, ist Lance mit Colton,
mit Skaz, mit mir selbst und mit Sam.

36
00:01:55,730 --> 00:02:00,230
Doch dann stellt sich heraus, dass ab
11.46 Uhr, so dass nur ein wenig vor,

37
00:02:00,230 --> 00:02:04,380
Ich ging zurück in mein E-Mail und gefunden
dass wir noch eine weitere Vorlage

38
00:02:04,380 --> 00:02:08,300
von einem Studenten namens Bonnie
deren E-Mail sagte nur diese.

39
00:02:08,300 --> 00:02:10,800
Nicht lügen, ich bin
Auf diese während des Unterrichts.

40
00:02:10,800 --> 00:02:17,620
Und fuhr dann fort, einfach anzubringen
14 Fotos, einer schüchternen von Lances 15.

41
00:02:17,620 --> 00:02:22,690
>> Aber in Bonnies Bilder, stellt sich
Sie waren mehrere Mitarbeiter, Sam

42
00:02:22,690 --> 00:02:25,960
unter ihnen, so dass das, was wir dachten, dass wir
tun würde, ist zu bestätigen beides.

43
00:02:25,960 --> 00:02:29,240
So dass zusätzlich zu bekommen die Dropbox
Raum, dass alle Teilnehmer

44
00:02:29,240 --> 00:02:33,900
empfängt, werden auch diese beiden Abschnitte
erhalten eine schöne liefertes Mittagessen für sie

45
00:02:33,900 --> 00:02:36,100
und ihre Abschnitt
paart in der kommenden Woche.

46
00:02:36,100 --> 00:02:38,970
Und so werden Sie von uns zu hören,
Lance und Bonnie, um Entschuldigung.

47
00:02:38,970 --> 00:02:40,002
So groß, congrats zu ihnen.

48
00:02:40,002 --> 00:02:42,210
Nun, diejenigen unter Ihnen, würde
wie Mittagessen allgemein

49
00:02:42,210 --> 00:02:45,320
wissen, dass CS50 Mittagessen in Cambridge
und New Haven ist an diesem Freitag.

50
00:02:45,320 --> 00:02:48,510
Zum CS50 Webseite Strich RSVP.

51
00:02:48,510 --> 00:02:49,800
Und nun ein Wort über Seminare.

52
00:02:49,800 --> 00:02:50,730
Mehr curricular.

53
00:02:50,730 --> 00:02:52,490
So dass wir kurz vor der
Punkt des Semesters

54
00:02:52,490 --> 00:02:55,200
wo Sie beginnen sollten
Nachdenken über Abschlussarbeiten.

55
00:02:55,200 --> 00:02:59,309
Und in der Tat, in der nur ein bisschen, wird
sogenannte aufgrund vorge Vorschläge sein.

56
00:02:59,309 --> 00:03:01,850
So vorge Vorschläge werden soll
ziemlich niedrig sein, Auswirkungen und wirklich

57
00:03:01,850 --> 00:03:04,109
nur eine Möglichkeit für
Sie eine kurze Notiz verfassen

58
00:03:04,109 --> 00:03:06,900
Ihre Lehrkollegen um die nötige Information
ihn oder sie, was Sie denken Sie

59
00:03:06,900 --> 00:03:09,140
Vielleicht möchten Sie für Ihre abschließende Projekt zu tun.

60
00:03:09,140 --> 00:03:11,730
>> Nun, viele Schüler am Ende
Dabei webbasierte Abschlussarbeiten.

61
00:03:11,730 --> 00:03:13,800
Und selbstverständlich, gerade wir
jetzt letzte Woche in diesem

62
00:03:13,800 --> 00:03:15,890
und darüber hinaus Tauchen in Web-Programmierung.

63
00:03:15,890 --> 00:03:18,200
Also nicht auf, wenn Sie Sorgen
habe absolut keine Ahnung, wie

64
00:03:18,200 --> 00:03:21,594
Sie würden die Ideen zu bauen, dass
Sie in Ihrem Verstand haben können.

65
00:03:21,594 --> 00:03:24,510
Das ist wirklich nur eine Zwangsfunktion
um Sie zum Nachdenken und Gespräche

66
00:03:24,510 --> 00:03:25,650
mit TF darüber.

67
00:03:25,650 --> 00:03:28,810
Aber um Ihnen dabei zu helfen, und
mit Abschlussarbeiten letztendlich

68
00:03:28,810 --> 00:03:31,750
wissen, dass CS50 hat eine Tradition
anzubieten Seminare.

69
00:03:31,750 --> 00:03:36,084
>> Und diese sind optional, die Hände auf,
oder auf Basis von Chancen Vortrag

70
00:03:36,084 --> 00:03:39,000
um mehr über Themen, die es zu lernen
ein kleines Neben dem Verlauf des

71
00:03:39,000 --> 00:03:43,310
Lehrplan, aber dennoch wunder
Material Abschlussarbeiten zu fahren.

72
00:03:43,310 --> 00:03:46,840
Und so ist die Liste, die ist
CS50 Personal hier in New Haven

73
00:03:46,840 --> 00:03:48,600
haben sich mit für gekommen
in diesem Jahr über iOS

74
00:03:48,600 --> 00:03:50,730
Programmierung, Android
Programmierung, Spiele-Entwicklung,

75
00:03:50,730 --> 00:03:54,480
und Bündeln von mehr Werkzeuge
und Sprachen und Techniken.

76
00:03:54,480 --> 00:03:56,780
>> So halten Sie ein Auge auf den CS50-Website.

77
00:03:56,780 --> 00:04:00,110
Und in der Zwischenzeit, wenn Sie möchten,
Melden Sie Ihr Interesse an einer dieser Punkte,

78
00:04:00,110 --> 00:04:02,510
gehen Sie zu CS50 der Schrägstrich-Register.

79
00:04:02,510 --> 00:04:05,770
Und wir werden dann Follow-up, um die
Tage und Flugzeiten und Standorte

80
00:04:05,770 --> 00:04:09,090
und everything-- meisten alles
gestreamt werden und auf Anfrage erhältlich

81
00:04:09,090 --> 00:04:11,750
nach, wenn Sie nicht tatsächlich machen es.

82
00:04:11,750 --> 00:04:15,800
So ohne weiteres, wir
letztes Mal mit GET aufgehört hat.

83
00:04:15,800 --> 00:04:19,610
>> Und das war, wie die Nachricht, war
innerhalb der virtuellen Umschlag, erinnern,

84
00:04:19,610 --> 00:04:23,960
dass wir vom Router geleitet, um Router
Router zwischen einem Web-Browser und einem Web-

85
00:04:23,960 --> 00:04:24,487
Server.

86
00:04:24,487 --> 00:04:26,695
Und diese Botschaft sah ein
wenig so etwas wie dieses.

87
00:04:26,695 --> 00:04:29,700
Das war die Botschaft, die mehr arkane
war tatsächlich in einer Hülle

88
00:04:29,700 --> 00:04:34,440
auf einem Stück Papier, dessen geschrieben
erste Zeile sagt wörtlich zu Schrägstrich.

89
00:04:34,440 --> 00:04:37,830
>> Und so wie eine Plausibilitätsprüfung,
was hast Schrägstrich bezeichnen?

90
00:04:37,830 --> 00:04:40,455
Was bedeutet Schrägstrich bedeutet, wenn
Anfordern einer Website?

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

92
00:04:43,070 --> 00:04:44,250
Sie fordern es die ganze Zeit.

93
00:04:44,250 --> 00:04:47,333
Die meisten, immer wenn Sie eine Website besuchen, können Sie
eigentlich gar nicht geben Sie einen Dateinamen ein.

94
00:04:47,333 --> 00:04:50,960
Sie haben wahrscheinlich nur um Facebook.com zu gehen,
Eingabe gmail.com oder dergleichen.

95
00:04:50,960 --> 00:04:52,260
Und was bedeutet Strich dar?

96
00:04:52,260 --> 00:04:53,506
Welche Datei?

97
00:04:53,506 --> 00:04:54,630
Oder welche Seite, speziell?

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

99
00:04:59,642 --> 00:05:00,720
>> Der Index, yeah.

100
00:05:00,720 --> 00:05:01,810
So der Standardseite.

101
00:05:01,810 --> 00:05:04,810
Also, wenn Sie eine Datei angeben
zu nennen, wie wir beginnen, um zu sehen,

102
00:05:04,810 --> 00:05:07,750
Sie tatsächlich nur anfordert
geben Sie mir die Standard-Seite von Facebook

103
00:05:07,750 --> 00:05:10,800
oder geben Sie mir meinem Posteingang oder geben
mir die Standard-Seite Neuigkeiten

104
00:05:10,800 --> 00:05:12,510
CNN-Website oder dergleichen.

105
00:05:12,510 --> 00:05:15,220
Und ein Server antwortet dann auf
wird diese Nachricht mit etwas

106
00:05:15,220 --> 00:05:18,420
wie diese, ja zu sagen, ich
sprechen HTTP-Version 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, die einen Status
Code, die wir Menschen nur selten

108
00:05:21,130 --> 00:05:22,790
überhaupt zu sehen, weil es gut ist.

109
00:05:22,790 --> 00:05:26,640
Weil es bedeutet, OK, die Anfrage
empfangen und richtig gehandhabt wird.

110
00:05:26,640 --> 00:05:28,960
Und die Art des Inhalts
offenbar in der Reaktion

111
00:05:28,960 --> 00:05:31,170
ist oft, aber nicht immer, Text.

112
00:05:31,170 --> 00:05:32,580
Und insbesondere HTML.

113
00:05:32,580 --> 00:05:34,760
Und das ist eigentlich
wo wir uns heute.

114
00:05:34,760 --> 00:05:37,140
>> So in der Tat, ich werde gehen
weiter und eröffnen einen Browser.

115
00:05:37,140 --> 00:05:40,410
Ich werde Chrome nutzen, können Sie
die meisten jedem Browser in den kommenden Wochen.

116
00:05:40,410 --> 00:05:42,410
Generell empfehlen wir Chrome
denn es ist insbesondere

117
00:05:42,410 --> 00:05:43,750
gut für Software-Entwickler.

118
00:05:43,750 --> 00:05:46,070
Es ist viel bekam gebaut in der
Werkzeuge, die es einfacher machen,

119
00:05:46,070 --> 00:05:49,800
nicht nur HTML und CSS zu entwickeln,
Dinge werden wir darüber zu reden heute,

120
00:05:49,800 --> 00:05:51,530
sondern auch andere Sprachen.

121
00:05:51,530 --> 00:05:55,530
>> Und ich werde weitermachen und gehen zu--
Ich werde Klick oder rechte Steuer

122
00:05:55,530 --> 00:05:57,210
klicken Sie irgendwo auf einer Webseite.

123
00:05:57,210 --> 00:05:59,070
Und ich werde gehen, um Element zu inspizieren.

124
00:05:59,070 --> 00:06:03,850
Und ich werde meinen zwicken
Bildschirm nur ein bisschen hier.

125
00:06:03,850 --> 00:06:05,790
Lassen Sie mich das auf den Boden zu bewegen.

126
00:06:05,790 --> 00:06:08,140
Also das ist, was heißt
Chrome Inspector.

127
00:06:08,140 --> 00:06:11,010
Also das ist wie ein Debugging-
Werkzeug in Chrome gebaut.

128
00:06:11,010 --> 00:06:13,520
>> Alle von Ihnen haben bereits diese
wenn Sie noch mit Chrome gewesen.

129
00:06:13,520 --> 00:06:17,169
Und ermöglicht es Ihnen, um zu sehen, was los ist
auf unter der Haube von einigen Web-Seite.

130
00:06:17,169 --> 00:06:19,210
Lassen Sie uns also tatsächlich einen
Schauen Sie sich diese wie folgt.

131
00:06:19,210 --> 00:06:21,251
Es hat viel mehr Funktionen
und wir kümmern uns heute.

132
00:06:21,251 --> 00:06:22,760
Aber es gibt diese Registerkarten hier.

133
00:06:22,760 --> 00:06:25,890
Elemente, Netzwerk, Quellen,
Timeline, und einige andere Sachen.

134
00:06:25,890 --> 00:06:27,800
Ich werde Sie auf
Netzwerk für einen Moment.

135
00:06:27,800 --> 00:06:30,500
>> Und es ist ein wenig überwältigend
auf den ersten Blick hier.

136
00:06:30,500 --> 00:06:34,190
Aber was ich tun werde, ist, lassen
me vereinfachen es ein wenig.

137
00:06:34,190 --> 00:06:37,560
Ich werde auf dem Turn
die Aufzeichnung von Licht, so dass es rot.

138
00:06:37,560 --> 00:06:39,140
Und ich werde sagen, zu bewahren Protokoll.

139
00:06:39,140 --> 00:06:41,015
Und dies ist nur ein wenig
was ich herausgefunden,

140
00:06:41,015 --> 00:06:44,120
im Laufe der Zeit, die gehen, um zu speichern
alles, was im Browser geschieht.

141
00:06:44,120 --> 00:06:50,030
Und jetzt werde ich gehen
um http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Eigentlich machen wir www
für eine gute Maßnahme, Schrägstrich.

143
00:06:52,690 --> 00:06:53,643
Eintreten.

144
00:06:53,643 --> 00:06:56,180
So eine URL, die viele
Sie könnten besucht haben.

145
00:06:56,180 --> 00:06:58,830
Und jetzt Facebook-web
Seite kommt an der Spitze.

146
00:06:58,830 --> 00:07:02,350
Und dann eine ganze Reihe von
Sachen flogen an der Unterseite.

147
00:07:02,350 --> 00:07:04,830
Und in der Tat stellt sich heraus, dass
wenn Sie Facebook.com zu besuchen,

148
00:07:04,830 --> 00:07:09,320
Sie nicht nur die Herstellung einer HTTP-Anfrage,
es stellt sich heraus, dass auf Facebook.com gehen

149
00:07:09,320 --> 00:07:14,320
sendet 41 jener Umschläge,
jede mit ihrer eigenen GET-Anforderung,

150
00:07:14,320 --> 00:07:18,360
wie angedeutet, wenn auch hinter dem Bildschirm
hier am unteren Rand des Bildschirms,

151
00:07:18,360 --> 00:07:24,040
es zeigt an, dass in der Tat meinen
Browser aus 41 die Anfragen.

152
00:07:24,040 --> 00:07:29,689
>> Und insgesamt, übertrug sie 861
Kilobyte und es dauerte aus irgendeinem Grund

153
00:07:29,689 --> 00:07:31,730
weniger als acht Sekunden
, all das zu downloaden.

154
00:07:31,730 --> 00:07:33,790
Also das ist wirklich ein bisschen komisch
dass Facebook-Seite würde das dauern

155
00:07:33,790 --> 00:07:35,600
lange, aber so dass es in diesem Fall.

156
00:07:35,600 --> 00:07:39,520
Nun, all das ich nicht wirklich interessieren
etwa mit Ausnahme der obersten Anfrage.

157
00:07:39,520 --> 00:07:46,440
Lassen Sie uns also auf diesen einen gehen hier
und lassen Sie mich zoom out für einen Moment.

158
00:07:46,440 --> 00:07:47,754
>> Und lassen Sie mich heran zu diesem Thema.

159
00:07:47,754 --> 00:07:50,670
Also, was ich habe auf der linken Seite, obwohl getan
es gibt eine Menge los hier

160
00:07:50,670 --> 00:07:53,360
ist Ich habe hervorgehoben
Facebook.com und dann

161
00:07:53,360 --> 00:07:56,540
feststellen, dass ich nach unten scrollen,
Scrollen nach unten, nach unten scrollen,

162
00:07:56,540 --> 00:07:58,330
In den Kopfzeilen anzufordern.

163
00:07:58,330 --> 00:08:01,720
Und du wirst sehen, dass Chrome zeigt
mich im wesentlichen die inneren Inhalte

164
00:08:01,720 --> 00:08:02,810
des Antrags Ich machte.

165
00:08:02,810 --> 00:08:06,130
Es ist nicht in genau der gleichen Formatierung
Weg, aber feststellen, es gibt Erwähnung erhalten,

166
00:08:06,130 --> 00:08:09,481
feststellen, es ist die Rede von dem Host,
Facebook.com, der Pfad oder Schrägstrich,

167
00:08:09,481 --> 00:08:10,730
das ist die Datei, die ich angefordert.

168
00:08:10,730 --> 00:08:12,930
>> Und dann, wenn ich blättern
Sichern, werden wir tatsächlich

169
00:08:12,930 --> 00:08:17,270
sehen, dass das, was Facebook zurück
für mich ist, alle diese Kopfzeilen.

170
00:08:17,270 --> 00:08:21,040
Also innerhalb dieser virtuellen Umschlag
tatsächlich gibt eine Menge von Schlüsselwert-Paaren.

171
00:08:21,040 --> 00:08:23,130
Ein Wort, ein Doppelpunkt und dann ein Wert.

172
00:08:23,130 --> 00:08:25,050
Ein Wort, ein Doppelpunkt und ein Wert.

173
00:08:25,050 --> 00:08:26,160
Diese werden als Header.

174
00:08:26,160 --> 00:08:31,860
Und es gibt noch viel mehr Detail als
wir eigentlich egal jetzt.

175
00:08:31,860 --> 00:08:33,750
>> Aber das ist an zweiter Stelle zu
letzte dort unten,

176
00:08:33,750 --> 00:08:38,809
beachten Sie, dass Facebook.com des Servers,
in der Tat hier gesagt kommt etwas Text HTML.

177
00:08:38,809 --> 00:08:41,409
Also all das ist zu sagen,
dass, wenn Sie eine Web-Anfrage

178
00:08:41,409 --> 00:08:44,300
Seite aus einem Browser, um eine
Server antwortet, dass Server-

179
00:08:44,300 --> 00:08:47,630
mit einer Hülle aus einem eigenen
innerhalb von denen ist Text.

180
00:08:47,630 --> 00:08:49,020
Mit anderen Worten, HTML.

181
00:08:49,020 --> 00:08:50,590
Hyper Text Markup Language.

182
00:08:50,590 --> 00:08:53,200
Das ist eine andere Sprache
dass wir heute vorstellen

183
00:08:53,200 --> 00:08:57,740
dass der Mensch oder Computer zu generieren
Zur Durchführung der Web-Seiten.

184
00:08:57,740 --> 00:08:59,580
>> Genauer gesagt, lassen Sie uns dies.

185
00:08:59,580 --> 00:09:03,277
Ich werde jetzt zurück
zu Facebook-Website.

186
00:09:03,277 --> 00:09:05,360
Und ich werde gerade
Steuer Klick oder Rechtsklick

187
00:09:05,360 --> 00:09:07,634
und klicken Sie auf Seitenquelltext.

188
00:09:07,634 --> 00:09:10,550
Und selbst wenn Sie nicht mit Chrome,
IE tun dies, Firefox dies tun können,

189
00:09:10,550 --> 00:09:14,060
Safari kann dies tun, auch wenn Sie im Menü
Optionen könnte ein wenig anders aussehen.

190
00:09:14,060 --> 00:09:18,990
Und das ist das HTML dieser Marke und
Unternehmen werden auf Facebook geschrieben habe.

191
00:09:18,990 --> 00:09:24,640
>> Und kollektiv, hier diese Sprache
implementiert die blaue und die weiße Seite

192
00:09:24,640 --> 00:09:26,370
sahen wir vor einem Moment.

193
00:09:26,370 --> 00:09:28,030
Nun, dies ist ein wenig überwältigend.

194
00:09:28,030 --> 00:09:31,400
Aber wenn wir bis oben links, wir sind
gehen zu beginnen, einige Muster zu sehen.

195
00:09:31,400 --> 00:09:34,140
Es sieht aus wie es gibt eine Menge
dieser offenen spitzen Klammer

196
00:09:34,140 --> 00:09:35,970
und dann gibt es dieses Schlüsselwort HTML.

197
00:09:35,970 --> 00:09:38,330
Hier ist eine weitere offene
Winkel und Kopf.

198
00:09:38,330 --> 00:09:41,560
>> Hier ist, wenn wir nach unten scrollen
und ab und ab, ich bin

199
00:09:41,560 --> 00:09:43,820
werde weitermachen und versuchen,
nach etwas suchen.

200
00:09:43,820 --> 00:09:48,510
Es Weg über auf der rechten Seite
Hier ist offen Klammerkörper.

201
00:09:48,510 --> 00:09:50,800
Und erinnern von den letzten
Zeit, die wir vorgeschlagen

202
00:09:50,800 --> 00:09:53,364
daß einfachsten Webseite
dass ein Mensch vielleicht schreiben

203
00:09:53,364 --> 00:09:55,030
könnte ein wenig wie folgt aussehen.

204
00:09:55,030 --> 00:09:58,430
Öffnen HTML-Tag, offene Kopf
Tag, offene Titel-Tag,

205
00:09:58,430 --> 00:10:03,230
dann geschlossen Titel, geschlossenen Kopf, offene
Body-Tag, ein Text, geschlossenen Körper,

206
00:10:03,230 --> 00:10:04,720
geschlossenen HTML.

207
00:10:04,720 --> 00:10:06,290
>> Aber eine Pause hier nur für einen Augenblick.

208
00:10:06,290 --> 00:10:09,030
Dieser Code, auch wenn Sie noch
es nie geschrieben

209
00:10:09,030 --> 00:10:11,864
aber immer noch nicht ganz verstehen,
was los ist, sieht gut aus.

210
00:10:11,864 --> 00:10:12,821
Richtig, es ist sehr sauber.

211
00:10:12,821 --> 00:10:14,120
Es ist sehr stilistisch schön.

212
00:10:14,120 --> 00:10:16,190
Viele Einzug und Leerraum.

213
00:10:16,190 --> 00:10:18,020
Facebook ist nicht.

214
00:10:18,020 --> 00:10:23,190
Warum ist Facebook so viel
schlimmer, als ich auf das Schreiben von HTML?

215
00:10:23,190 --> 00:10:24,310
Anscheinend.

216
00:10:24,310 --> 00:10:26,899
>> Richtig, das ist wie eine
von fünf für Stil.

217
00:10:26,899 --> 00:10:29,315
Es gibt einen zwingenden Grund
für sie, diese Ecken schneiden.

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

219
00:10:31,069 --> 00:10:33,860
In Ordnung, so dass sie nicht wollen,
machen es einfacher für Sie, es zu lesen.

220
00:10:33,860 --> 00:10:36,940
Also in einem gewissen Sinne, sie sind
Verschleiern es, Art kriechen, es

221
00:10:36,940 --> 00:10:40,260
zumindest ästhetisch so
, dass es schwieriger für Myspace

222
00:10:40,260 --> 00:10:42,705
zu gehen und rip off ihre
Homepage und das HTML für sie.

223
00:10:42,705 --> 00:10:45,080
Es stellt sich heraus, dass mit den Programmen
obwohl, wie Chrom,

224
00:10:45,080 --> 00:10:47,020
wir können dies bis super einfach zu reinigen.

225
00:10:47,020 --> 00:10:49,420
So ist es nicht ganz so wie der Grund.

226
00:10:49,420 --> 00:10:51,290
Was könnte die Ursache sein.

227
00:10:51,290 --> 00:10:51,790
Ja.

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

229
00:10:54,680 --> 00:10:55,890
Ja, weißen Raum Kosten Daten.

230
00:10:55,890 --> 00:10:56,598
Was meinst du?

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

232
00:11:02,250 --> 00:11:02,979
Ja genau.

233
00:11:02,979 --> 00:11:06,020
Wenn Sie die TAB-Taste eine Menge oder der Hit
Leertaste, prüfen die Auswirkungen.

234
00:11:06,020 --> 00:11:10,060
Also jeder Taste auf der Tastatur ist ein
[Unverständlich], wie ein Byte dargestellt.

235
00:11:10,060 --> 00:11:14,560
>> So nehme an, dass Mark oder einen der Entwickler
in diesen Tagen trifft die Leertaste nur einmal

236
00:11:14,560 --> 00:11:17,899
in dieser HTML-Seite,
stellt die Homepage von Facebook.

237
00:11:17,899 --> 00:11:19,690
Und Facebook hat eine Menge
der Nutzer in diesen Tagen.

238
00:11:19,690 --> 00:11:24,030
So nehme an, dass die Homepage von Facebook
wird von einer Milliarde Menschen heute besucht.

239
00:11:24,030 --> 00:11:27,020
Und jemand bei Facebook hat
die Leertaste nur einmal.

240
00:11:27,020 --> 00:11:29,890
>> So ein zusätzliches Byte,
eine Milliarde Anfragen,

241
00:11:29,890 --> 00:11:32,790
wie viel mehr Daten Facebook
Übertragen über das Internet

242
00:11:32,790 --> 00:11:37,160
weil jemand traf die
Leertaste auf seine Tastatur?

243
00:11:37,160 --> 00:11:41,660
Eine Milliarde Byte oder ein Gigabyte
Daten von Facebook-Server gesendet

244
00:11:41,660 --> 00:11:43,626
um Menschen auf der
Welt ohne guten Grund.

245
00:11:43,626 --> 00:11:44,750
Nun, das ist nur ein Raum.

246
00:11:44,750 --> 00:11:48,866
>> Stellen Sie sich vor, wenn wir tatsächlich reinigen Sie diese
Sache und eingerückt ist und das hinzugefügt

247
00:11:48,866 --> 00:11:50,990
eine Menge von Leerzeichen und
Tabulatoren und Leerzeichen,

248
00:11:50,990 --> 00:11:53,656
Sie am Ende Ausgaben Gigabyte,
wenn nicht terra Zeichen mehr Platz.

249
00:11:53,656 --> 00:11:56,640
Und so super in die gemeinsame
wirklichen Welt der Web-Entwicklung

250
00:11:56,640 --> 00:11:58,950
ist es, Ihren Code minify.

251
00:11:58,950 --> 00:12:01,280
Und wir werden irgendwann zu sehen
wie Sie dies tun.

252
00:12:01,280 --> 00:12:04,630
>> Aber heute werden wir das Schreiben von Code beginnen
das ist von uns Menschen tatsächlich lesbar.

253
00:12:04,630 --> 00:12:10,120
Es stellt sich heraus, obwohl, wenn Sie zurück zu gehen
zu diesem Werkzeug in Chrome Inspect Element,

254
00:12:10,120 --> 00:12:12,030
zuvor, waren wir auf der Registerkarte Netzwerk.

255
00:12:12,030 --> 00:12:15,430
Es stellt sich heraus, dass, wenn Sie unterwegs
Elemente Registerkarte, was Sie tatsächlich sehen,

256
00:12:15,430 --> 00:12:19,230
wird Chrome ziemlich gedruckt
Version derselben HTML.

257
00:12:19,230 --> 00:12:20,640
Also haben wir es deobfuscated.

258
00:12:20,640 --> 00:12:22,472
So ist es kein Spiel für einen Computer.

259
00:12:22,472 --> 00:12:24,430
Und jetzt können Sie wirklich
Klicken Sie sich um und starten

260
00:12:24,430 --> 00:12:27,630
um die Hierarchie, die eine Web-Seite ist zu sehen.

261
00:12:27,630 --> 00:12:28,780
Also lassen Sie uns dies tatsächlich zu tun.

262
00:12:28,780 --> 00:12:32,120
Ich werde weitermachen und eröffnen auf
meinem Mac ein Programm namens Text bearbeiten.

263
00:12:32,120 --> 00:12:35,490
Und erinnere, dass dies nur
ein super einfachen Textprogramm.

264
00:12:35,490 --> 00:12:37,490
Windows verfügt über notepad.exe.

265
00:12:37,490 --> 00:12:39,820
Und ich werde Verbatim
Geben Sie die folgende.

266
00:12:39,820 --> 00:12:44,650
Doc-Typ HTML, offene Bügel
HTML, geschlossene Klammer HTML,

267
00:12:44,650 --> 00:12:49,000
wir haben den Kopf der Seite hier
das Ende der Kopf der Seite hier

268
00:12:49,000 --> 00:12:52,310
ein Titel wird wie, hallo Welt sein.

269
00:12:52,310 --> 00:12:56,660
>> Und dann hier unten brauchen wir
der Körper der Webseite.

270
00:12:56,660 --> 00:12:58,050
Koffer.

271
00:12:58,050 --> 00:13:00,700
Und dann hier, hallo Welt.

272
00:13:00,700 --> 00:13:01,270
Gut.

273
00:13:01,270 --> 00:13:03,350
So haben wir eine super schnelle Web-Seite geschrieben.

274
00:13:03,350 --> 00:13:06,675
Ich werde es als zu sparen
hello.html auf meinem Desktop.

275
00:13:06,675 --> 00:13:09,050
Mein Mac gehen, sich zu beschweren,
denken, dass, warten Sie eine Minute,

276
00:13:09,050 --> 00:13:11,091
Dies ist eine Textdatei, tun
Sie es nennen .txt suchen?

277
00:13:11,091 --> 00:13:13,300
Aber nein, ich will dot HTML verwenden.

278
00:13:13,300 --> 00:13:16,140
>> Und dann, was ist schön, wenn ich
doppelklicken Sie einfach auf die Datei,

279
00:13:16,140 --> 00:13:18,600
hello.html, hier ist meine Web-Seite.

280
00:13:18,600 --> 00:13:22,564
Leider bin ich der
einzige Person in der Welt

281
00:13:22,564 --> 00:13:23,980
die diese Seite jetzt besuchen.

282
00:13:23,980 --> 00:13:26,734
Denn wo kommt es offenbar zu leben?

283
00:13:26,734 --> 00:13:27,650
Es ist auf meinem Mac, oder?

284
00:13:27,650 --> 00:13:28,470
Welches ist nutzlos.

285
00:13:28,470 --> 00:13:30,390
Wie niemand in diesem Raum
geschweige denn im Internet

286
00:13:30,390 --> 00:13:31,598
kann tatsächlich besuchen die Seite.

287
00:13:31,598 --> 00:13:33,820
Also heute, müssen wir
präsentieren ein weiteres Element.

288
00:13:33,820 --> 00:13:36,720
>> Und um dies zu tun, ich bin zu gehen
gehen Sie vor und eröffnen Cloud 9.

289
00:13:36,720 --> 00:13:40,090
So Cloud 9 ist natürlich ein
Cloud-basierte service-- CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Das hat alle unsere Arbeitsbereiche
Lauf irgendwo im Internet.

291
00:13:44,890 --> 00:13:48,330
Und das bedeutet, dass alle unsere Dateien
sind bereits öffentlich zugänglich.

292
00:13:48,330 --> 00:13:49,830
Lassen Sie uns also gehen Sie voran und tun dies.

293
00:13:49,830 --> 00:13:53,670
Ich werde weitermachen und
Erstellen einer neuen Datei NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Ich werde es nach wie vor zu sparen
wie hello.html und klicken Sie auf Speichern.

295
00:13:58,819 --> 00:14:01,860
Und jetzt, nur um Zeit zu sparen, werde ich
gehen Sie vor und kopieren Sie diesen Code und fügen

296
00:14:01,860 --> 00:14:03,470
anstatt geben Sie es erneut.

297
00:14:03,470 --> 00:14:04,550
Und speichern Sie es.

298
00:14:04,550 --> 00:14:07,550
Und jetzt habe ich ein
Datei namens hello.html.

299
00:14:07,550 --> 00:14:09,710
Aber wie kann ich eigentlich
öffnen Sie es als eine Webseite?

300
00:14:09,710 --> 00:14:14,120
Nun stellt sich heraus, die in den CS50 gebaut
IDE ist nicht nur ein Compiler wie clang

301
00:14:14,120 --> 00:14:16,670
und einen Debugger wie GDB und
Trauben von anderen Programmen,

302
00:14:16,670 --> 00:14:21,140
es gibt tatsächlich ein vollwertiges
Web-Server innerhalb CS50 IDE ausgeführt.

303
00:14:21,140 --> 00:14:23,900
>> Alle von euch, das heißt,
Ihren eigenen Web-Server.

304
00:14:23,900 --> 00:14:26,850
Und ein Web-Server ist nur ein Stück
der Software, deren Zweck im Leben

305
00:14:26,850 --> 00:14:28,220
ist es, Web-Seiten bedienen.

306
00:14:28,220 --> 00:14:32,490
Um Anforderungen von Browsern zu hören und
reagieren mit wenig virtuellen Umschläge

307
00:14:32,490 --> 00:14:35,290
innerhalb dessen das
Inhalte, die ich geschrieben habe.

308
00:14:35,290 --> 00:14:38,372
Also das Web-Server
tatsächlich kostenlos und Open Source.

309
00:14:38,372 --> 00:14:40,830
Wo Open Source bedeutet nur,
Software, dass jemand anderes hat

310
00:14:40,830 --> 00:14:43,480
geschrieben, dass alle von uns
tatsächlich sehen und downloaden und sogar

311
00:14:43,480 --> 00:14:44,780
ändern Sie den Quellcode.

312
00:14:44,780 --> 00:14:46,150
Und es heißt Apache.

313
00:14:46,150 --> 00:14:51,450
>> Und wir es ein wenig leichter gemacht habe
Verwendung in CS50IDE indem er sie Apache 50.

314
00:14:51,450 --> 00:14:53,780
So dass es tatsächlich
verstehen, die folgenden.

315
00:14:53,780 --> 00:14:56,560
Ich werde Apache 50 Anfang sagen.

316
00:14:56,560 --> 00:14:58,910
Und dann habe ich werde einfach dot sagen.

317
00:14:58,910 --> 00:15:01,080
Und wir einige etwas zu sehen
obskuren Meldung

318
00:15:01,080 --> 00:15:04,640
Einstellen von Apache-Dokument [? Gruppe?]
nach Hause, ubuntu, was immer das ist,

319
00:15:04,640 --> 00:15:05,770
Schrägstrich-Arbeitsbereich.

320
00:15:05,770 --> 00:15:08,280
Ab Webserver
Apache 2 erfolgreich.

321
00:15:08,280 --> 00:15:11,330
>> So lange Geschichte kurz, ich
habe gerade drückte einen Knopf

322
00:15:11,330 --> 00:15:18,000
und drehte sich auf einem Webserver, der jetzt
Hören im Internet auf TCP-Port

323
00:15:18,000 --> 00:15:20,587
80 an einer bestimmten Adresse.

324
00:15:20,587 --> 00:15:22,420
Und hier steht und
Dies wird sich noch ändern

325
00:15:22,420 --> 00:15:26,550
auf Ihren Benutzernamen und andere Faktoren,
aber beachten, wenn ich nun darauf klicken,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard usw. und
so fällt auf, dass die ganze Zeit

327
00:15:30,211 --> 00:15:31,960
In den vergangenen
Wochen, haben Sie vielleicht

328
00:15:31,960 --> 00:15:35,200
aufgefallen, dass Sie Ihre eigenen Benutzernamen
wird in der oberen rechten eingebettet

329
00:15:35,200 --> 00:15:37,130
Ecke CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> Und dass alle tatsächlich war dies
Mal, wenn die Adresse, an der du kannst

331
00:15:41,050 --> 00:15:43,574
besuchen Sie alle Ihre Dateien über das Web.

332
00:15:43,574 --> 00:15:45,990
Bisher war es nicht von Bedeutung,
weil in C, die Sie in der Regel

333
00:15:45,990 --> 00:15:48,073
Dinge in eine laufende möchten
Terminal, nicht im Web.

334
00:15:48,073 --> 00:15:50,800
Aber heute, beginnen wir
Schreiben von Web-basierten Code

335
00:15:50,800 --> 00:15:53,350
dass wir wollen,
zugänglich zu öffentlichen URLs.

336
00:15:53,350 --> 00:15:56,100
Also, was ich zu gehen
zu tun ist, klicken Sie auf diese URL.

337
00:15:56,100 --> 00:16:00,880
>> Und merke, dass ich ein ziemlich zu sehen
ugly-Index, eine Verzeichnis-Liste,

338
00:16:00,880 --> 00:16:04,090
aber welche Datei heraus springt dich wohl?

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

340
00:16:05,210 --> 00:16:07,870
Das ist, weil ich gerettet
die Datei in meinem Arbeitsbereich.

341
00:16:07,870 --> 00:16:12,310
Und das, was ich sagte dem Apache Web-Server
im Arbeitsbereichsverzeichnis David zu suchen.

342
00:16:12,310 --> 00:16:15,300
Und lassen Sie jemand in der
Welt sehen diese Dateien.

343
00:16:15,300 --> 00:16:19,050
>> Und in der Tat, wenn ich jetzt
klicken Sie hello.html,

344
00:16:19,050 --> 00:16:22,180
Ich sehe in diesem Register genau diese Datei.

345
00:16:22,180 --> 00:16:26,430
Nun beachtet, Cloud 9 tut
etwas ein wenig hilfreich für uns.

346
00:16:26,430 --> 00:16:29,480
Innerhalb CS50 IDE, bemerken es gibt
plötzlich eine Adressleiste.

347
00:16:29,480 --> 00:16:33,690
Das liegt daran, obwohl wir
mit Chrome, um CS50IDE besuchen,

348
00:16:33,690 --> 00:16:37,940
Innere CS50IDE ist seine eigene
Version eines Web-Browsers im Augenblick.

349
00:16:37,940 --> 00:16:40,820
Und so statt
die Dinge zu komplizieren als solche,

350
00:16:40,820 --> 00:16:42,955
Ich werde weitermachen
und kopieren Sie einfach diese URL.

351
00:16:42,955 --> 00:16:45,330
Ich werde Sie vor und gehen Sie einfach
öffne meine eigenen Chrome-Fenster.

352
00:16:45,330 --> 00:16:47,800
So gibt es keine Magie hier, keine CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Ich werde einfach wörtlich zu fügen
meine J Harvard URL und drücken Sie Enter.

354
00:16:51,800 --> 00:16:54,750
Und voila, jetzt bin, und
in der Theorie, jeder

355
00:16:54,750 --> 00:16:57,700
über das Internet, wenn ich konfiguriert haben
Berechtigungen entsprechend,

356
00:16:57,700 --> 00:16:58,720
Diese Datei können Sie besuchen.

357
00:16:58,720 --> 00:17:03,230
Und jetzt, wenn ich sagte,
hello.html, voila, es

358
00:17:03,230 --> 00:17:06,366
ist mein unglaublich berauschend Webseite.

359
00:17:06,366 --> 00:17:07,740
Lassen Sie uns so tun, eine schnelle Plausibilitätsprüfung.

360
00:17:07,740 --> 00:17:09,710
Weil all das
ist konzeptionellen Aufbau.

361
00:17:09,710 --> 00:17:13,180
Und wir haben eigentlich nicht wirklich
Sie lernen, wie man zu schreiben HTML per se.

362
00:17:13,180 --> 00:17:16,084
Bisher noch Fragen
auf, was gerade passiert?

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

364
00:17:18,549 --> 00:17:19,049
Ja.

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

366
00:17:24,290 --> 00:17:25,800
Hat CS50 besitzen diese Webseiten?

367
00:17:25,800 --> 00:17:26,460
In welchem ​​Sinn?

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

369
00:17:28,947 --> 00:17:29,530
Gute Frage.

370
00:17:29,530 --> 00:17:32,429
So CS50 ist besitzt CS50.io.

371
00:17:32,429 --> 00:17:33,970
Wir haben in der Tat, dass die Domain-Namen gekauft.

372
00:17:33,970 --> 00:17:37,240
Und von der Natur von euch
Anmeldung in CS50IDE,

373
00:17:37,240 --> 00:17:39,270
Sie alle bekommen eine so genannte Sub-Domain.

374
00:17:39,270 --> 00:17:46,840
>> So IDE50-malan oder IDE50-Rob.CS50.io,
das ist Ihre einzigartige Adresse im

375
00:17:46,840 --> 00:17:47,730
unsere Domain-Namen.

376
00:17:47,730 --> 00:17:50,850
Auch für die Zwecke des Kurses
haben Sie Ihre eigene eindeutige Adresse.

377
00:17:50,850 --> 00:17:55,150
Aber wir haben die Dinge durch vereinfachte
Kauf der Top Level Domain, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O und dann alle anderen
Innere daß sozusagen.

379
00:17:58,050 --> 00:17:59,890
Und wir werden darauf zurückkommen
in ein paar Wochen, wahrscheinlich,

380
00:17:59,890 --> 00:18:01,930
insbesondere bei endgültigen Projekt
Zeit, als einige von euch

381
00:18:01,930 --> 00:18:03,596
Vielleicht möchten Sie Ihren eigenen Domain-Namen zu erhalten.

382
00:18:03,596 --> 00:18:06,270
Es ist eigentlich relativ
unkompliziert.

383
00:18:06,270 --> 00:18:06,770
Gut.

384
00:18:06,770 --> 00:18:07,880
Lassen Sie uns also jetzt tun.

385
00:18:07,880 --> 00:18:11,910
Ich werde wieder in gehen
CS50IDE, wo meine Datei gerade jetzt,

386
00:18:11,910 --> 00:18:14,710
hello.html, ist gar nicht so interessant.

387
00:18:14,710 --> 00:18:17,130
Ich möchte etwas zu tun
ein wenig schöner als das.

388
00:18:17,130 --> 00:18:19,440
Also werde ich, so etwas zu tun.

389
00:18:19,440 --> 00:18:21,510
Lassen Sie mich offen paragraphs.html.

390
00:18:21,510 --> 00:18:23,560
Das ist also eine Datei, die ich vorher geschrieben haben.

391
00:18:23,560 --> 00:18:26,480
An der Spitze davon, wie
immer, haben wir Kommentare.

392
00:18:26,480 --> 00:18:28,730
Aber in HTML, Kommentare
etwas anders aussehen.

393
00:18:28,730 --> 00:18:33,270
In Zeile drei und Linie 14, die Sie
siehe Syntax starten einen Kommentar

394
00:18:33,270 --> 00:18:34,020
und am Ende einen Kommentar zu schreiben.

395
00:18:34,020 --> 00:18:36,820
>> Aber keiner von dem Zeug in
zwischen Sachen funktional.

396
00:18:36,820 --> 00:18:40,250
Es ist nur eine Notiz an ein
menschliche, was hier vor sich geht.

397
00:18:40,250 --> 00:18:43,040
Und ebenso wie eine schnelle geistige Gesundheit
zu überprüfen, wenn ich nach unten scrollen,

398
00:18:43,040 --> 00:18:46,820
was ist der offensichtliche neue
Tag, die wir eingeführt haben?

399
00:18:46,820 --> 00:18:52,130
Die bisher haben wir gesehen Tags offen sind
Halterung HTML, Kopf, Titel und Körper.

400
00:18:52,130 --> 00:18:54,400
Aber was ist nun offensichtlich neu?

401
00:18:54,400 --> 00:18:55,200
>> Ja, so p.

402
00:18:55,200 --> 00:18:57,320
Die p-Tag oder Absatz-Tag.

403
00:18:57,320 --> 00:19:01,182
Und dann habe ich ausgeliehen nur einige Standard
Lateinischen Text, meine Absätze bilden.

404
00:19:01,182 --> 00:19:03,390
Denn das, was ich wollte,
zeigen, ist, wie Sie

405
00:19:03,390 --> 00:19:05,859
stellen Textabsätze in HTML.

406
00:19:05,859 --> 00:19:08,400
Und was fängt an zu passieren,
hierbei ist, dass es bereits

407
00:19:08,400 --> 00:19:09,657
ein Muster der Entwicklung.

408
00:19:09,657 --> 00:19:10,990
Und lassen Sie mich gehen Sie vor und tun dies.

409
00:19:10,990 --> 00:19:12,760
Lassen Sie mich zunächst deaktivieren Apache.

410
00:19:12,760 --> 00:19:17,340
Und ich werde es sagen zu sich selbst zu starten
wieder im Inneren des heutigen Quelle sieben

411
00:19:17,340 --> 00:19:18,420
m-Verzeichnis.

412
00:19:18,420 --> 00:19:20,100
So dass ich Zugang zu allem.

413
00:19:20,100 --> 00:19:22,230
>> Und jetzt, wenn ich wieder nach
Dieses Verzeichnis-Liste,

414
00:19:22,230 --> 00:19:24,846
merke ich jede Datei von heute sehen.

415
00:19:24,846 --> 00:19:26,720
Und du wirst in der zu sehen
nächste Problem Satz, werden wir

416
00:19:26,720 --> 00:19:28,594
Ihnen Anweisungen
für genau dieses zu tun.

417
00:19:28,594 --> 00:19:35,210
Wenn ich öffnen paragraphs.html, könnte dies
ebenso wie eine Programmiersprache zu suchen

418
00:19:35,210 --> 00:19:36,970
für Sie, wenn Sie nicht sprechen oder lesen Latin.

419
00:19:36,970 --> 00:19:40,525
Aber das ist nur drei Absätze
Text, der in HTML gekennzeichnet sind.

420
00:19:40,525 --> 00:19:43,100
>> Und beachten Sie den Absatz
Pausen zwischen ihnen.

421
00:19:43,100 --> 00:19:46,400
Denn es stellt sich heraus,
und obwohl Sie

422
00:19:46,400 --> 00:19:49,210
könnte geneigt, dies zu tun ist,
wohingegen in der realen Welt,

423
00:19:49,210 --> 00:19:51,370
wenn Sie in die Linie setzen möchten
Pausen zwischen den Dingen,

424
00:19:51,370 --> 00:19:55,680
Sie vielleicht ganz einfach
tun dies, und drücken Sie auf Speichern.

425
00:19:55,680 --> 00:19:59,460
Und jetzt, wenn ich neu zu laden Hier Ankündigung
dass alles nur verwischt zusammen

426
00:19:59,460 --> 00:20:01,100
in nur einem Klecks Text.

427
00:20:01,100 --> 00:20:03,570
Da HTML ist eine Art stumme Sprache.

428
00:20:03,570 --> 00:20:07,230
>> Es soll so eingesetzt werden
eine Möglichkeit, dass der Browser wird nur

429
00:20:07,230 --> 00:20:09,920
tun explizit, was Sie sagen, es zu tun.

430
00:20:09,920 --> 00:20:12,890
Also, wenn Sie nicht sagen, es
gib mir einen neuen Absatz,

431
00:20:12,890 --> 00:20:14,569
du wirst doch nicht um einen neuen Absatz zu sehen.

432
00:20:14,569 --> 00:20:16,360
Und in der Tat, was die
Browser tun wird

433
00:20:16,360 --> 00:20:20,020
ist, auch wenn Sie die Eingabetaste drücken,
Lassen Sie uns immer und immer wieder sagen,

434
00:20:20,020 --> 00:20:23,190
wieder, bewegen Sie diesen Text so
unten auf dem Bildschirm und speichern

435
00:20:23,190 --> 00:20:26,610
und dann neu zu laden, der Browser wird
um all das Leerzeichen zusammenbrechen

436
00:20:26,610 --> 00:20:29,021
in nur einer einzigen, sichtbare Leerzeichen.

437
00:20:29,021 --> 00:20:29,520
Gut.

438
00:20:29,520 --> 00:20:30,869
Das ist also der Absatz-Tag.

439
00:20:30,869 --> 00:20:32,910
Und so was ist das Muster
das ist hier die Entwicklung?

440
00:20:32,910 --> 00:20:37,450
Nun, es scheint der Fall zu sein, dass
HTML ist alles über die Gründung eines Tag-

441
00:20:37,450 --> 00:20:38,460
und endet einen Tag.

442
00:20:38,460 --> 00:20:39,300
Und was ist ein Tag?

443
00:20:39,300 --> 00:20:41,160
Nun, es ist nur ein Stück von Syntax.

444
00:20:41,160 --> 00:20:44,400
Offene Halterung, ein Stichwort,
geschlossene Bügel, ist ein Tag.

445
00:20:44,400 --> 00:20:45,510
Oder Start-Tag.

446
00:20:45,510 --> 00:20:48,590
Und dann, wenn Sie
getan, die sich heraus,

447
00:20:48,590 --> 00:20:52,300
wie in man mit dem Absatz getan,
können Sie dies tun, um gegenüber zu sprechen.

448
00:20:52,300 --> 00:20:55,480
Aber das Gegenteil ist nicht ganz nach hinten.

449
00:20:55,480 --> 00:21:00,630
>> Sie voran einfach der gleichen Tag-
Namen mit einem Schrägstrich wie diese.

450
00:21:00,630 --> 00:21:01,130
Gut.

451
00:21:01,130 --> 00:21:02,570
Also nicht so spannend.

452
00:21:02,570 --> 00:21:05,270
Und in der Tat, wir sind nicht so dass die
web alles, was noch interessanter.

453
00:21:05,270 --> 00:21:07,630
Was ist, wenn ich machen möchte
Dinge größer und Fett?

454
00:21:07,630 --> 00:21:11,780
So stellt sich heraus, dass hier ein Beispiel
in headings.html, wo in meinem Körper,

455
00:21:11,780 --> 00:21:17,280
Ich habe ein H1-Tag, H2, H3 bekamen,
vier, fünf oder sechs, von denen alle

456
00:21:17,280 --> 00:21:18,310
scheinen ziemlich obskur.

457
00:21:18,310 --> 00:21:21,010
Aber wenn ich diese öffnen
ZB lassen Sie uns einen Blick.

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

459
00:21:22,490 --> 00:21:27,030
>> So Browsern standardmäßig geben, können Sie Text
das ist groß und Fett von unterschiedlichen Größen.

460
00:21:27,030 --> 00:21:28,070
H1 ist groß.

461
00:21:28,070 --> 00:21:31,240
H6 kleiner und dann
alles dazwischen.

462
00:21:31,240 --> 00:21:34,170
Also das ist interessant, aber noch
nicht wirklich die Bahn die ich kenne.

463
00:21:34,170 --> 00:21:36,870
Was, wenn wir wollen, habe ich
so etwas wie eine Liste. .

464
00:21:36,870 --> 00:21:40,190
Also hier ist eine Liste mit Aufzählungszeichen von
drei der Harvard Häuser.

465
00:21:40,190 --> 00:21:41,600
>> Wie haben Sie über das tun dies gehen?

466
00:21:41,600 --> 00:21:45,410
Nun, einen Blick auf list.html.

467
00:21:45,410 --> 00:21:47,870
Und hier sehen wir ein
wenig von Funkiness

468
00:21:47,870 --> 00:21:49,630
aber laßt uns überlegen, was passiert.

469
00:21:49,630 --> 00:21:56,182
Also, was Sie gerade gesehen haben auf der Grundlage,
UL steht für ungeordnete Liste.

470
00:21:56,182 --> 00:21:57,640
Ungeordnete Liste nur bedeutet, mit Aufzählungszeichen.

471
00:21:57,640 --> 00:21:58,431
Es gibt keine Zahlen.

472
00:21:58,431 --> 00:22:01,850
Es gibt auch so etwas wie eine
geordnete Liste, die eine OL am Tag ist.

473
00:22:01,850 --> 00:22:05,350
Dann LI ist Listenelement alle es bedeutet.

474
00:22:05,350 --> 00:22:07,790
>> Und so ist es automatisch
Zahlen alles für Sie.

475
00:22:07,790 --> 00:22:11,270
Aber noch einmal, alle meine Einbuchtung
und Weißraum ist nur um meinetwillen.

476
00:22:11,270 --> 00:22:13,050
Der Browser ist nicht
tatsächlich zu kümmern.

477
00:22:13,050 --> 00:22:16,670
Also auch wenn man nicht
dies zu tun, nur um klar zu sein,

478
00:22:16,670 --> 00:22:19,880
Sie sollten nicht obwohl auch
Der Browser wird noch

479
00:22:19,880 --> 00:22:22,130
in der Lage sein, es zu verstehen just fine.

480
00:22:22,130 --> 00:22:24,590
Ich schlage reload in meinem
Browser, ich Klick reload

481
00:22:24,590 --> 00:22:26,760
und keine Veränderung geschieht
weil der Browser noch

482
00:22:26,760 --> 00:22:29,550
tut genau das, was ich sage, es zu tun.

483
00:22:29,550 --> 00:22:30,050
>> Gut.

484
00:22:30,050 --> 00:22:31,340
Also das ist alles nur Text.

485
00:22:31,340 --> 00:22:33,730
Lassen Sie uns jetzt etwas tun, interessanter.

486
00:22:33,730 --> 00:22:36,660
Ich werde weitermachen und
leihen einige dieser HTML.

487
00:22:36,660 --> 00:22:40,910
Ich werde weitermachen und
Erstellen einer neuen Datei hier.

488
00:22:40,910 --> 00:22:43,370
Und wir werden diese rick.html nennen.

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

490
00:22:46,190 --> 00:22:48,916
Wir haben überproportional
gebrauchte etwas

491
00:22:48,916 --> 00:22:51,290
genannt rick Rolle in diesem
Klasse in diesem Jahr, ich weiß es nicht,

492
00:22:51,290 --> 00:22:53,880
es ist einfach passiert organisch.

493
00:22:53,880 --> 00:22:55,397
>> Und jetzt ist es außer Kontrolle geraten.

494
00:22:55,397 --> 00:22:56,730
Also ich bin gerade dabei, mit ihm zu gehen.

495
00:22:56,730 --> 00:22:59,700
Und wenn ich zu Google
Bilder und Rick Astley.

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

497
00:23:02,450 --> 00:23:06,170
Wenn Sie nicht wissen, warum wir tun,
Diese, nur lesen Sie auf Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Jedes Mal, wenn Sie auf den Link geklickt haben,
jemand gelacht irgendwo.

499
00:23:11,520 --> 00:23:14,860
Und lassen Sie mich ahead-- dorthin zu gehen
wir gehen, ist der Ansicht dieses Bild lassen.

500
00:23:14,860 --> 00:23:16,750
>> Hier haben wir also ein
Bild in Google Images.

501
00:23:16,750 --> 00:23:19,390
Und lassen Sie uns annehmen, dass dies
vernünftigerweise überall im Internet.

502
00:23:19,390 --> 00:23:22,570
Also werde ich davon ausgehen, es ist OK für mich
um tatsächlich legte dieses in meiner Web-Seite.

503
00:23:22,570 --> 00:23:24,820
Ich werde weitermachen
und kopieren Sie Bild-URL.

504
00:23:24,820 --> 00:23:28,600
Und jetzt, wenn ich wieder nach Wolken
9, mal sehen, was ich hier tun.

505
00:23:28,600 --> 00:23:30,630
So, hier ist nur eine Web-Seite.

506
00:23:30,630 --> 00:23:39,020
Das ist Rick Astley, haha,
Ich werde jetzt zurück

507
00:23:39,020 --> 00:23:43,510
Zu meinen Browser neu laden, und interessant.

508
00:23:43,510 --> 00:23:44,530
>> Wo ist Rick?

509
00:23:44,530 --> 00:23:46,050
Also lassen Sie mich sehen, was passiert ist.

510
00:23:46,050 --> 00:23:49,114
Eigentlich bin ich zu gehen
so tun, wie ich nicht tun.

511
00:23:49,114 --> 00:23:50,280
[Unverständlich] setzte ihn in hier.

512
00:23:50,280 --> 00:23:52,520
Wir werden in einem Moment zurückkommen.

513
00:23:52,520 --> 00:23:54,200
Also hier ist rick.html.

514
00:23:54,200 --> 00:23:56,070
Also das ist nicht Rick Astley.

515
00:23:56,070 --> 00:23:59,680
So stellt sich heraus wir können
tatsächlich ihn hier hinzufügen.

516
00:23:59,680 --> 00:24:00,830
Das ist Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Ich werde sagen, gib mir ein Bild, dessen
Quelle ist die URL Ich habe gerade kopiert, die

518
00:24:06,680 --> 00:24:09,110
anscheinend ist ein glückliches
Geburtstag etwas oder anderen.

519
00:24:09,110 --> 00:24:13,280
>> Und jetzt bin ich zu gehen
schließen Sie den Tag wie diesem.

520
00:24:13,280 --> 00:24:15,170
Also das ist Einwickeln super lange.

521
00:24:15,170 --> 00:24:17,740
Aber feststellen, dass alles, was ich habe
getan Bild offene Klammer,

522
00:24:17,740 --> 00:24:20,270
Quelle mit einem Attribut von diesem.

523
00:24:20,270 --> 00:24:21,530
Und es ist eine wirklich lange URL.

524
00:24:21,530 --> 00:24:23,720
Und ganz am Ende, merkt das.

525
00:24:23,720 --> 00:24:29,530
Warum habe ich getan Strich Winkelhalter
statt, wie jeder andere Tag,

526
00:24:29,530 --> 00:24:33,590
mit einer offenen Klammer,
IMG, geschlossene Klammer?

527
00:24:33,590 --> 00:24:37,040
Nehmen Sie einfach eine Vermutung, auch wenn Sie
keine Vertrautheit auch immer

528
00:24:37,040 --> 00:24:40,410
mit HTML vor.

529
00:24:40,410 --> 00:24:42,710
>> So ist es, wie es geschlossen wird
der Befehl, aber warum

530
00:24:42,710 --> 00:24:45,850
ist es nicht wirklich machen intuitive
Sinn, etwas ein wenig mehr zu tun

531
00:24:45,850 --> 00:24:48,820
Ausführlich wie enge Bild?

532
00:24:48,820 --> 00:24:51,400
Ja.

533
00:24:51,400 --> 00:24:52,000
Ja.

534
00:24:52,000 --> 00:24:55,620
Nur semantisch, es gibt keinen Sinn für
Starten eines Bildes und endend ein Bild,

535
00:24:55,620 --> 00:24:56,870
es ist entweder da oder ist es nicht.

536
00:24:56,870 --> 00:25:00,960
So ist es nicht sinnvoll ist, um eine Lücke zu lassen
für alles andere innerhalb eines Bildes.

537
00:25:00,960 --> 00:25:02,010
Sie können einfach nicht tun.

538
00:25:02,010 --> 00:25:03,720
Und so ist die Syntax
würde in der Regel nur sein,

539
00:25:03,720 --> 00:25:07,910
um den Schrägstrich im Inneren zu tun
der Open-Tag oder dem Start-Tag

540
00:25:07,910 --> 00:25:09,020
und dann drücken Sie auf Speichern.

541
00:25:09,020 --> 00:25:13,350
>> Also, wenn ich jetzt diese Datei neu zu laden, jetzt
Ich habe einen guten Web-Seite kochen hier.

542
00:25:13,350 --> 00:25:15,100
Und wir konnten sicher
wirklich ärgern Menschen

543
00:25:15,100 --> 00:25:17,010
durch die Einbettung statt
wie ein YouTube-Link.

544
00:25:17,010 --> 00:25:19,350
Und in der Tat zu jeder Zeit
Sie überhaupt auf YouTube gegangen,

545
00:25:19,350 --> 00:25:22,190
und lassen Sie mich tatsächlich versehentlich
rick rolle mich hier.

546
00:25:22,190 --> 00:25:25,770
So Rick Roll.

547
00:25:25,770 --> 00:25:29,592
So rick Roll-- Ich werde hier.

548
00:25:29,592 --> 00:25:31,900
>> [Musikwiedergabe]

549
00:25:31,900 --> 00:25:33,730
>> OK, mochte eine Person, dass.

550
00:25:33,730 --> 00:25:37,270
So bemerken die ganze Zeit, wenn Sie
klicken Sie auf den Link weiterleiten, können Sie selbstverständlich

551
00:25:37,270 --> 00:25:41,390
Holen Sie sich die URL, die Sie tatsächlich
in E-Mail oder einer forensischen Bild einbetten

552
00:25:41,390 --> 00:25:43,730
oder zu einem Problem eingestellt oder in einer Diashow.

553
00:25:43,730 --> 00:25:49,055
Und jetzt, wenn ich statt klicken Sie einbetten,
feststellen, dass die ganze Zeit, dieses Zeug

554
00:25:49,055 --> 00:25:49,680
hat es.

555
00:25:49,680 --> 00:25:50,910
Ich werde weitermachen und kopieren Sie diese.

556
00:25:50,910 --> 00:25:54,000
>> Und nur damit können wir es besser zu sehen, bin ich
werde es in meinem Text-Editor einfügen.

557
00:25:54,000 --> 00:25:55,860
Beachten Sie, dass das, was
YouTube hat Ihnen erzählt.

558
00:25:55,860 --> 00:25:57,693
Jedes Mal, wenn Sie besuchen ein
YouTube-Video, wenn Sie

559
00:25:57,693 --> 00:26:00,410
will das Video auf Ihren einbetten
Web-Seite, einfach packen das.

560
00:26:00,410 --> 00:26:03,350
Das ist also ein weiterer
HTML-Tag genannt iframe.

561
00:26:03,350 --> 00:26:04,590
Oder in Linienrahmen.

562
00:26:04,590 --> 00:26:08,680
So ist es auch, es sieht ein wenig mehr
komplexer als alle anderen.

563
00:26:08,680 --> 00:26:11,950
So stellt sich heraus, dass das Bild,
Tag und anscheinend das iframe-Tag

564
00:26:11,950 --> 00:26:13,370
nehmen, was sind als Attribute bezeichnet.

565
00:26:13,370 --> 00:26:15,710
>> Und dies ist ein anderer
Stück Syntax in HTML.

566
00:26:15,710 --> 00:26:19,240
Zusätzlich zu dem Tag-
Name, offene Klammer Tag-Namen,

567
00:26:19,240 --> 00:26:23,780
können Sie das Verhalten der Variablen kontrollieren
indem er eine ganze Reihe von Attribut

568
00:26:23,780 --> 00:26:24,860
gleich Wert.

569
00:26:24,860 --> 00:26:26,290
Attributwert entspricht.

570
00:26:26,290 --> 00:26:28,100
Und so zum Beispiel
YouTube sagt uns,

571
00:26:28,100 --> 00:26:31,990
wenn Sie die Breite des Videos möchte
420 Pixel und die Höhe werden

572
00:26:31,990 --> 00:26:35,470
bis 315 Pixel groß sein, das ist,
wie Sie es ausdrücken in HTML.

573
00:26:35,470 --> 00:26:38,480
>> Die Quelle des Video wird
so lange YouTube URL

574
00:26:38,480 --> 00:26:40,830
und noch einige andere Sachen
wie Rahmengrenze gleich Null ist,

575
00:26:40,830 --> 00:26:43,500
so dass wahrscheinlich bedeutet, dass es
kein Rahmen um die Sache.

576
00:26:43,500 --> 00:26:45,450
Lassen Sie wahrscheinlich Vollbild
bedeutet, dass der Benutzer

577
00:26:45,450 --> 00:26:47,840
kann auf eine Schaltfläche klicken und
tatsächlich Vollbild-Video.

578
00:26:47,840 --> 00:26:52,870
Also, wenn ich sein wollen wirklich
beeindruckende hier in Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
anstatt die Image-Tag, lassen
mich zu löschen, dass anstelle fügen Sie diesen.

580
00:26:58,490 --> 00:27:00,810
Und jetzt neu zu laden.

581
00:27:00,810 --> 00:27:02,500
Und jetzt gehen wir wieder.

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

583
00:27:04,979 --> 00:27:06,020
Na gut, das ist genug.

584
00:27:06,020 --> 00:27:08,970
Na gut, so werde ich versuchen,
schwer, nicht wieder zu tun.

585
00:27:08,970 --> 00:27:11,400
Also, was sind einige der Imbissbuden hier?

586
00:27:11,400 --> 00:27:15,130
So HTML, so hässlich wie diesen Webseiten
sind, ist eigentlich recht einfach.

587
00:27:15,130 --> 00:27:16,467
Es ist nicht eine Programmiersprache.

588
00:27:16,467 --> 00:27:17,550
Es hat nicht funktioniert.

589
00:27:17,550 --> 00:27:18,410
Es muss nicht Schleifen.

590
00:27:18,410 --> 00:27:19,535
Es muss nicht Bedingungen.

591
00:27:19,535 --> 00:27:22,900
Alles, was es hat, ist Dutzende von
verschiedenen Tags, von denen jeder

592
00:27:22,900 --> 00:27:24,620
hat null oder mehrere Attribute.

593
00:27:24,620 --> 00:27:27,320
Und in der Tat, was ist der Spaß zu
HTML, wie Sie, um in zu tauchen beginnen

594
00:27:27,320 --> 00:27:29,560
ist, dass es sehr selbstlernfähig.

595
00:27:29,560 --> 00:27:32,880
>> Alles was es braucht ist ein Verständnis
des allgemeinen Rahmens der HTML.

596
00:27:32,880 --> 00:27:36,510
Was ist ein Tag, was ist ein Attribut,
wie wollen Sie eigentlich konfigurieren Sie eine Web-Seite

597
00:27:36,510 --> 00:27:37,250
folgendermaßen.

598
00:27:37,250 --> 00:27:40,720
Und alles andere ist wirklich das Ergebnis
der Blick nach oben in einer Online-Referenz

599
00:27:40,720 --> 00:27:43,080
oder googeln, wie einige tun
Technik oder wie wir gesehen haben,

600
00:27:43,080 --> 00:27:45,371
Blick in die Facebook-Source-
Code, mit Blick auf eine Website

601
00:27:45,371 --> 00:27:48,710
dass Sie es mögen ist Quellcode und
zu verstehen, wie die Entwickler es

602
00:27:48,710 --> 00:27:50,550
tatsächlich gelegt Dinge aus.

603
00:27:50,550 --> 00:27:52,180
>> Also haben wir Bilder als auch tun können.

604
00:27:52,180 --> 00:27:53,994
Und in der Tat, wir haben es vorhin.

605
00:27:53,994 --> 00:27:55,410
Lassen Sie mich gehen Sie vor und nur zeigen Ihnen.

606
00:27:55,410 --> 00:27:56,770
Hier ist ein Beispielcode.

607
00:27:56,770 --> 00:27:58,380
Wenn Sie schon immer einmal grumpy cat sehen.

608
00:27:58,380 --> 00:28:00,620
So bemerken, dass ich kann,
habe hier ein Bild-Tag.

609
00:28:00,620 --> 00:28:02,090
Und ich habe einen Kommentar über es.

610
00:28:02,090 --> 00:28:04,490
Ich habe eine Alternative bekommen
Text für die Barrierefreiheit.

611
00:28:04,490 --> 00:28:07,250
Also jemand, der mit einem Bildschirm
Leser aus Gründen der Sicht

612
00:28:07,250 --> 00:28:10,172
kann tatsächlich dann ihre
Bildschirmleser sagen grumpy cat.

613
00:28:10,172 --> 00:28:11,880
Denn wenn sie es nicht können
siehe das Bild, sie

614
00:28:11,880 --> 00:28:14,504
zumindest haben ihre Computer
ihnen sagen, mündlich, was es ist.

615
00:28:14,504 --> 00:28:18,020
Und die Quelle dieser Datei ist cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
So in der Tat, wenn ich wirklich wollte,
bekommen clever, was ich konnte done--

617
00:28:22,472 --> 00:28:25,680
Ich verspreche, nicht zu Rick Astley zu gehen, so
Ich werde für eine Katze statt google.

618
00:28:25,680 --> 00:28:28,290
Und wenn ich zu Google Images
hier, und wir gehen davon aus,

619
00:28:28,290 --> 00:28:30,040
dass dies ist ein Bild von meiner Katze.

620
00:28:30,040 --> 00:28:35,070
>> Nehmen wir an, dass ich die Kontrolle geklickt
oder rechts angeklickt dies versehentlich

621
00:28:35,070 --> 00:28:35,630
gruselig.

622
00:28:35,630 --> 00:28:40,320
Und cat.jpeg Ich werde
auf meinem Desktop zu speichern.

623
00:28:40,320 --> 00:28:44,700
Lassen Sie mich nun zurück zu Cloud 9.

624
00:28:44,700 --> 00:28:48,150
Feststellen, dass hier, kann ich
gehen Sie zu lokalen Dateien hochladen.

625
00:28:48,150 --> 00:28:51,530
Und wenn ich zu greifen diese
Datei cat.jpeg, Ankündigung

626
00:28:51,530 --> 00:28:54,674
dass ich es per Drag &
Drop in Cloud 9

627
00:28:54,674 --> 00:28:56,090
und es geht um mich hier zu schreien.

628
00:28:56,090 --> 00:28:59,000
>> Da wir bereits haben
gegeben Ihnen einen cat.jpeg-Datei,

629
00:28:59,000 --> 00:29:01,430
aber es ist super einfach zu
schnappen Sie ein Foto, das Sie haben,

630
00:29:01,430 --> 00:29:03,220
von Facebook übernommen
oder Flickr oder dergleichen

631
00:29:03,220 --> 00:29:05,678
und tatsächlich per Drag & Drop
in Cloud 9 und dann machen es

632
00:29:05,678 --> 00:29:07,970
Teil Ihrer eigenen persönlichen
Website oder Problem

633
00:29:07,970 --> 00:29:10,442
set sieben oder acht, wie wir bald sehen werden.

634
00:29:10,442 --> 00:29:12,150
Und dann, wenn Sie
Schließlich besuchen Sie die Katze,

635
00:29:12,150 --> 00:29:16,610
unter der Annahme, die ich heruntergeladen habe, dass dieselbe Katze,
Hinweis dass-- das war entzückend.

636
00:29:16,610 --> 00:29:19,160
>> Was würden Sie sehen, ist,
so etwas wie dieses Gesicht hier.

637
00:29:19,160 --> 00:29:21,810
Also die Dateien, die Sie
Referenz im Web-Seite

638
00:29:21,810 --> 00:29:26,050
kann entweder lokal im eigenen sein
Konto oder remote auf einem anderen Server

639
00:29:26,050 --> 00:29:29,670
wie im Fall des Rick
Astley Foto ein wenig vor.

640
00:29:29,670 --> 00:29:32,990
Also, wo, was else--
sonst können wir hier tun?

641
00:29:32,990 --> 00:29:34,890
Werfen wir also einen Blick auf die folgenden.

642
00:29:34,890 --> 00:29:36,160
Sie wissen, was irgendwie cool?

643
00:29:36,160 --> 00:29:39,330
>> Damit haben wir bisher machen
sehr statische Web-Seiten.

644
00:29:39,330 --> 00:29:41,830
Ich möchte etwas aufzupeppen wie folgt.

645
00:29:41,830 --> 00:29:44,344
Ich möchte meine eigene Suchmaschine zu machen.

646
00:29:44,344 --> 00:29:47,010
Also, eine Suchmaschine zu machen, lassen Sie uns
gehen Sie vor und beginnen, dies zu tun.

647
00:29:47,010 --> 00:29:52,570
Ich werde weitermachen und erstellen
eine neue Datei namens search.html.

648
00:29:52,570 --> 00:29:54,890
Und wir haben Versionen online prefabed.

649
00:29:54,890 --> 00:29:56,027
Whoops.

650
00:29:56,027 --> 00:29:57,610
Nicht in Ihrem Terminal-Fenster einfügen.

651
00:29:57,610 --> 00:29:58,744
Prefab-Versionen online.

652
00:29:58,744 --> 00:30:00,160
Und ich werde wie folgt starten.

653
00:30:00,160 --> 00:30:04,490
Also hier ist der Anfang
eine Datei namens search.html.

654
00:30:04,490 --> 00:30:07,510
Ich werde es in sparen
heutigen Quellverzeichnis.

655
00:30:07,510 --> 00:30:09,079
Ich werde diese Suche aufzurufen.

656
00:30:09,079 --> 00:30:10,370
Eigentlich werden wir es besser machen.

657
00:30:10,370 --> 00:30:13,600
CS50 suchen und tatsächlich Marke es.

658
00:30:13,600 --> 00:30:17,500
Und jetzt werde ich sagen,
so etwas wie H1 CS50 suchen.

659
00:30:17,500 --> 00:30:20,930
Und dann hier unten, H2 in Kürze.

660
00:30:20,930 --> 00:30:23,230
Und nur zur Erinnerung, H1 und
H2 bedeuten, was jeweils?

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

662
00:30:26,750 --> 00:30:30,320
>> Ja, so groß und Fett, und
nicht so groß, aber immer noch fett.

663
00:30:30,320 --> 00:30:37,375
Also, wenn ich diese speichern und hier,
mal sehen, die Datei search.html.

664
00:30:37,375 --> 00:30:42,560
In Ordnung, und dieses
ist right-- [unverständlich].

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

666
00:30:46,980 --> 00:30:49,110
Stehen zu.

667
00:30:49,110 --> 00:30:49,945
David ist verwirrt.

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

669
00:30:52,610 --> 00:30:54,080
Oh, es ist recht.

670
00:30:54,080 --> 00:30:54,860
David ist ein Idiot.

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

672
00:30:55,420 --> 00:30:56,660
Also da ist es.

673
00:30:56,660 --> 00:30:58,350
So CS50 Suche in Kürze.

674
00:30:58,350 --> 00:31:00,370
So, jetzt lassen Sie uns zu synthetisieren
was wir getan haben in der vergangenen Woche.

675
00:31:00,370 --> 00:31:03,400
>> Wo wir über die gesprochen
untere Ebene Mechanik des HTTP.

676
00:31:03,400 --> 00:31:05,780
Und diese neuen Ideen
von HTML, das nur

677
00:31:05,780 --> 00:31:08,890
Dieses Markup-Sprache in dem Sie
Weiters Browser genau was zu tun

678
00:31:08,890 --> 00:31:10,740
und Umsetzung unserer eigenen Suchmaschine.

679
00:31:10,740 --> 00:31:12,520
Also anstatt nur
sagen, kommt bald, ich bin

680
00:31:12,520 --> 00:31:14,810
gehen zu präsentieren,
so etwas wie ein Form-Tag.

681
00:31:14,810 --> 00:31:19,610
Und in dieser Form, ich bin zu gehen
so etwas wie einem Eingabefeld.

682
00:31:19,610 --> 00:31:22,450
>> Und der Name dieses Eingangs
Feld, werde ich es nennen Q.

683
00:31:22,450 --> 00:31:26,240
Und der Typ dieses Eingabefeld
Ich werde sagen, ist nur "Text".

684
00:31:26,240 --> 00:31:29,130
Und ein Textfeld, wie wir
zu sehen, ist nur ein Textfeld.

685
00:31:29,130 --> 00:31:32,830
Und so ist es nicht hier spüren zu müssen
nichts in der es an dieser Stelle.

686
00:31:32,830 --> 00:31:35,320
Und so bin ich einfach gehen
um den Tag mit, dass in der Nähe

687
00:31:35,320 --> 00:31:38,099
Schrägstrich mitten im Tag selbst.

688
00:31:38,099 --> 00:31:39,890
Und dann bin ich los
haben einen anderen Eingang.

689
00:31:39,890 --> 00:31:43,480
Eingangstyp entspricht einreichen.

690
00:31:43,480 --> 00:31:45,320
Und dann bin ich los
schließen diese auch.

691
00:31:45,320 --> 00:31:46,840
>> Und jetzt werde ich hier wieder zurück.

692
00:31:46,840 --> 00:31:49,520
Und schon sehen wir,
wenn auch ziemlich hässlich, ich habe

693
00:31:49,520 --> 00:31:52,460
bekam die Anfänge
meine eigene Suchseite hier.

694
00:31:52,460 --> 00:31:55,150
In der Tat, lassen Sie mich, um zu versuchen
Reinigen Sie diese ein wenig.

695
00:31:55,150 --> 00:31:57,330
Es stellt sich heraus, daß an den
Hier Eingangs, ich kann

696
00:31:57,330 --> 00:31:59,910
ein weiteres Attribut namens Platzhalter.

697
00:31:59,910 --> 00:32:05,165
Und ich könnte so etwas wie Keywords sehen
oder genauer gesagt, Abfrage für q.

698
00:32:05,165 --> 00:32:07,820
>> Und beachten Sie, jetzt habe ich
diese Art von grauem Text

699
00:32:07,820 --> 00:32:10,440
dass verschwindet,
sobald ich beginnen Sie zu schreiben,

700
00:32:10,440 --> 00:32:12,930
aber es ist wahrscheinlich etwas,
Sie in anderen Webseiten gesehen habe.

701
00:32:12,930 --> 00:32:14,650
Ich weiß nicht wirklich wie die Schaltfläche Absenden.

702
00:32:14,650 --> 00:32:18,320
Also ich bin eigentlich los, um das zu geben
Submit-Button einen Wert von Suche.

703
00:32:18,320 --> 00:32:21,680
Und jetzt, wenn ich neu zu laden, feststellen, dass
meine Taste wird mit dem Namen suchen.

704
00:32:21,680 --> 00:32:24,140
Wissen Sie, ich weiß nicht wirklich
wie das Logo hier.

705
00:32:24,140 --> 00:32:27,140
Also Google Font-Generator.

706
00:32:27,140 --> 00:32:28,820
>> Ich möchte dies weiter oben zu würzen.

707
00:32:28,820 --> 00:32:30,660
So CS50 Suche.

708
00:32:30,660 --> 00:32:31,870
Lassen Sie mich meine eigenen Logo zu erstellen.

709
00:32:31,870 --> 00:32:33,080
Das sieht nett aus.

710
00:32:33,080 --> 00:32:36,945
So, jetzt lassen Sie mich zu retten diese as-- aufleuchtet.

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

712
00:32:40,710 --> 00:32:43,120
Wo ist es?

713
00:32:43,120 --> 00:32:43,620
Dort.

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

715
00:32:44,160 --> 00:32:44,980
Es verpasst.

716
00:32:44,980 --> 00:32:47,740
Speichern als.

717
00:32:47,740 --> 00:32:49,470
Dumm Browsern.

718
00:32:49,470 --> 00:32:51,700
Stand by, sind wir zu gehen
dieses Problem beheben ein für alle Mal.

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

720
00:32:57,650 --> 00:32:58,590
Da gehen wir.

721
00:32:58,590 --> 00:32:59,090
Gut.

722
00:32:59,090 --> 00:32:59,600
Es tut uns leid.

723
00:32:59,600 --> 00:33:00,750
Off Tag.

724
00:33:00,750 --> 00:33:02,310
Nun ist dies flippig.

725
00:33:02,310 --> 00:33:03,160
Vollbildmodus beenden.

726
00:33:03,160 --> 00:33:04,150
Gut.

727
00:33:04,150 --> 00:33:06,870
>> Jetzt, wie eine normale
Person, Bild speichern unter.

728
00:33:06,870 --> 00:33:08,810
Logo.gif.

729
00:33:08,810 --> 00:33:13,194
Jetzt werde ich in CS50IDE und gehen
Ich werde einfach der Logo,

730
00:33:13,194 --> 00:33:15,360
Ich werde sie in ziehen
meine Quelle sieben Verzeichnis

731
00:33:15,360 --> 00:33:17,002
Datei bereits vorhanden ist, Ich bin OK mit, dass.

732
00:33:17,002 --> 00:33:19,210
Also werde ich, um es zu überschreiben
denn ich hatte es schon.

733
00:33:19,210 --> 00:33:20,630
Und nun, wie kann ich loswerden das?

734
00:33:20,630 --> 00:33:24,670
>> Lassen Sie uns gehen Sie hier und tun
Bildquelle gleich logo.gif.

735
00:33:24,670 --> 00:33:25,490
Schließen Sie diese.

736
00:33:25,490 --> 00:33:26,050
Sparen.

737
00:33:26,050 --> 00:33:30,560
Und jetzt, wenn ich zurück zu meiner Suche
Seite, jetzt ist es ziemlich gut.

738
00:33:30,560 --> 00:33:33,610
Alles klar, also hat es nicht
recht, etwas Sinnvolles getan.

739
00:33:33,610 --> 00:33:37,000
In der Tat, lassen Sie mich versuchen Suche
für eine Katze und sehen was passiert.

740
00:33:37,000 --> 00:33:38,890
Katzen.

741
00:33:38,890 --> 00:33:39,420
Verdammt.

742
00:33:39,420 --> 00:33:41,400
Es ist nicht nur arbeiten, anscheinend.

743
00:33:41,400 --> 00:33:43,760
Also, was ist der Schlüssel Stück
das ist hier fehlt?

744
00:33:43,760 --> 00:33:49,100
>> Richtig, auch wenn Sie keine HTML-Kenntnisse,
Ich habe angefangen Kennzeichnung zum Telefon Form

745
00:33:49,100 --> 00:33:54,130
und ich habe es gesagt, wie Eingänge zu erhalten,
gib mir ein Textfeld und eine Schaltfläche einreichen,

746
00:33:54,130 --> 00:33:55,730
welche Stück offenbar fehlt?

747
00:33:55,730 --> 00:33:58,975
Angenommen, wir wollen wirklich erhalten
dieses Ding richtig funktioniert.

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

749
00:34:02,420 --> 00:34:05,360
Was müssen wir tun?

750
00:34:05,360 --> 00:34:08,860
Wir haben das Bedürfnis, das Backend zu implementieren
Datenbank oder die Suchmaschine selbst,

751
00:34:08,860 --> 00:34:11,210
und das wird ein nehmen
ganze Menge Zeit, ehrlich gesagt.

752
00:34:11,210 --> 00:34:13,380
>> Also denken Sie daran, was wir das letzte Mal.

753
00:34:13,380 --> 00:34:18,230
Also, wenn Sie nach etwas auf Google-Suche
und Sie haben im Vorfeld ausgeschaltet,

754
00:34:18,230 --> 00:34:20,355
Recall, Instant Suche.

755
00:34:20,355 --> 00:34:22,230
Also lassen Sie mich dies ausschalten
so dass diese tatsächlich

756
00:34:22,230 --> 00:34:26,650
verhält sich wie eine ältere Schule Browser,
wenn ich jetzt so etwas wie Katzen zu suchen,

757
00:34:26,650 --> 00:34:28,190
daran erinnern, was die URL aussieht.

758
00:34:28,190 --> 00:34:29,449
Es ist ziemlich kryptisch.

759
00:34:29,449 --> 00:34:33,000
Aber es eingebettet ist,
Rückruf ist Strich Suche.

760
00:34:33,000 --> 00:34:35,100
Fragezeichen q gleich Katzen.

761
00:34:35,100 --> 00:34:37,760
>> Und das scheint mir zu geben
eine ganze Reihe von Suchergebnissen.

762
00:34:37,760 --> 00:34:39,134
Damit Sie wissen, was ich jetzt tun?

763
00:34:39,134 --> 00:34:41,650
Ich werde leihen
Google nur für eine Minute.

764
00:34:41,650 --> 00:34:43,670
Ich werde gehen über
hier und ich werde sagen,

765
00:34:43,670 --> 00:34:47,850
dass dies bildet Handlung oder
Ziel, so zu sprechen,

766
00:34:47,850 --> 00:34:49,330
wörtlich Google sein.

767
00:34:49,330 --> 00:34:52,590
Und die Methode, die ich wollte,
zum Einsatz sein wird, zu erhalten.

768
00:34:52,590 --> 00:34:53,560
>> Also, was ist Handeln?

769
00:34:53,560 --> 00:34:55,760
Aktion ist seltsam benannten,
aber das bedeutet nur,

770
00:34:55,760 --> 00:34:58,120
wer wird zu handhaben
die Wirkung dieser Form?

771
00:34:58,120 --> 00:35:00,820
Wenn ich auf Suche, in dem
sollte das Ergebnis gehen?

772
00:35:00,820 --> 00:35:05,300
Und wenn ich jetzt wieder zu meiner Form
hier und laden Sie meine Web-Seite

773
00:35:05,300 --> 00:35:09,000
Und nun zu etwas zu suchen
wie Hund, bemerken jetzt

774
00:35:09,000 --> 00:35:10,850
Ich habe wieder implementiert Google.

775
00:35:10,850 --> 00:35:11,350
Recht?

776
00:35:11,350 --> 00:35:14,141
>> Wenn ich will, um für etwas zu suchen
sonst funktioniert es nicht nur für Hunde,

777
00:35:14,141 --> 00:35:16,400
Es funktioniert auch für Katzen.

778
00:35:16,400 --> 00:35:21,930
Es funktioniert auch für CS50.

779
00:35:21,930 --> 00:35:24,310
Und OK, das ist nur
unter überwältigend, ist es nicht?

780
00:35:24,310 --> 00:35:25,920
In Ordnung, aber es funktioniert tatsächlich.

781
00:35:25,920 --> 00:35:27,360
Also, was ist eigentlich los ist?

782
00:35:27,360 --> 00:35:31,340
So habe ich in meinem Browser gelehrt, mit
HTML, auf eine Eingabe von dem Benutzer ergreifen

783
00:35:31,340 --> 00:35:35,810
und tatsächlich zu senden, dass die Eingabe
zu einem Remote-Server über HTTP.

784
00:35:35,810 --> 00:35:39,120
>> Und weil mein Browser
versteht HTTP, es tatsächlich

785
00:35:39,120 --> 00:35:43,500
konstruieren die URL, so dass das, was
Ich am Ende mehr als in meinem Browser,

786
00:35:43,500 --> 00:35:45,660
feststellen, was passiert,
wenn ich nach Hund.

787
00:35:45,660 --> 00:35:49,270
Wenn ich Sie auf Suche bemerken, dass
die URL ändert, wie ich gedacht

788
00:35:49,270 --> 00:35:52,770
um google.com/search~~V Abfrage gleich Hund.

789
00:35:52,770 --> 00:35:56,020
Und das ist, weil der Form
weiß, da das Verfahren zu bekommen,

790
00:35:56,020 --> 00:35:59,560
einfach hängen Sie ihn an dieser URL gibt.

791
00:35:59,560 --> 00:36:01,730
>> Nun sind diese Web-Seiten immer noch hässlich.

792
00:36:01,730 --> 00:36:04,890
Lassen Sie uns also vorstellen einen anderen
Stück Syntax, wenn wir können heute.

793
00:36:04,890 --> 00:36:07,640
Und das ist etwas bekannter
wie Cascading Style Sheets.

794
00:36:07,640 --> 00:36:10,720
Lassen Sie mich einen Blick auf
Dieses Beispiel hier und sehen,

795
00:36:10,720 --> 00:36:12,380
wenn wir folgern, was los ist.

796
00:36:12,380 --> 00:36:14,520
Dies ist CSS0.html.

797
00:36:14,520 --> 00:36:16,532
Und das ist, wo die Dinge
ein wenig hässlich.

798
00:36:16,532 --> 00:36:18,490
Denn leider,
in der Welt des Internets,

799
00:36:18,490 --> 00:36:20,920
HTML allein kann nicht alles tun.

800
00:36:20,920 --> 00:36:22,920
Und so, wenn Sie wollen
stilisieren Ihre Web-Seite,

801
00:36:22,920 --> 00:36:28,370
Sie tatsächlich benötigen, um auf die zu konzentrieren
Ästhetik in einer anderen Weise.

802
00:36:28,370 --> 00:36:33,090
Also hier habe ich den Körper von meiner Web-
Seite, innerhalb dessen ein großer div.

803
00:36:33,090 --> 00:36:34,700
Und ein div bedeutet nur, Division.

804
00:36:34,700 --> 00:36:38,060
Also ist es wie ein Absatz, aber es
nicht die gleiche Semantik aufweisen

805
00:36:38,060 --> 00:36:39,180
eines Textabsatz.

806
00:36:39,180 --> 00:36:40,940
>> Dies bedeutet nur, um die
Browser, hier kommt

807
00:36:40,940 --> 00:36:45,210
ein großer rechteckiger Bereich meiner Web-
Seite, ich will es speziell zu behandeln.

808
00:36:45,210 --> 00:36:47,420
Jetzt ist die Linie 21, wo das div beginnt.

809
00:36:47,420 --> 00:36:48,770
Und nehmen Sie nur eine Vermutung.

810
00:36:48,770 --> 00:36:53,080
Was ist die Wirkung der Linie 21 auf der
Rest des Inhalts der Seite?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Zentrierung.

813
00:36:56,311 --> 00:36:56,810
Das ist alles.

814
00:36:56,810 --> 00:36:58,830
So haben wir einen Weg der nicht gesehen
tatsächlich Zentrierung des Textes.

815
00:36:58,830 --> 00:37:00,996
>> In der Tat, meine Suchmaschine,
im Gegensatz zu der tatsächlichen Google,

816
00:37:00,996 --> 00:37:03,040
wurde ganz nach links gerechtfertigt.

817
00:37:03,040 --> 00:37:07,430
Und nun in Zeile 21, werde ich sagen, hey
Browser, erstellen Sie eine Aufteilung der Seite.

818
00:37:07,430 --> 00:37:09,450
Geben Sie mir einen großen, unsichtbaren Rechteck.

819
00:37:09,450 --> 00:37:11,490
Das ist, wie ich will
denken über die Web-Seite.

820
00:37:11,490 --> 00:37:13,870
Und dann zu stilisieren es wie folgt.

821
00:37:13,870 --> 00:37:16,900
Innerhalb dieser Zitate,
Jetzt, eine zweite Sprache

822
00:37:16,900 --> 00:37:19,969
dass wir heute vorgestellt
genannt Cascading Style Sheets.

823
00:37:19,969 --> 00:37:22,010
Gott sei Dank, auch ist es nicht
eine Programmiersprache,

824
00:37:22,010 --> 00:37:26,470
so ist es sehr in ihrer Syntax beschränkt, sondern
auch in seiner Funktion sehr begrenzte

825
00:37:26,470 --> 00:37:30,670
wohin HTML ist alles über
Markieren Sie die Daten von einer Webseite

826
00:37:30,670 --> 00:37:32,130
und die Struktur einer Webseite.

827
00:37:32,130 --> 00:37:35,320
CSS ist im allgemeinen etwa das
letzte Meile, die Ästhetik,

828
00:37:35,320 --> 00:37:40,160
immer die Größe und die Farbe und die
Platzierung genau richtig in eine Web-Seite.

829
00:37:40,160 --> 00:37:43,000
Und in der Tat, sie ausgebildet ist
mit den wichtigsten Wert-Paaren.

830
00:37:43,000 --> 00:37:46,290
>> Eine Eigenschaft wie dieser, Text
auszurichten, gefolgt von einem Doppelpunkt,

831
00:37:46,290 --> 00:37:49,720
gefolgt von dem Wert, dass
Eigentum, das ist in diesem Fall entfernt.

832
00:37:49,720 --> 00:37:51,910
Und jetzt stellen Sie fest,
nisten können diese Dinge.

833
00:37:51,910 --> 00:37:56,780
Wenn ich wollte, dass alles, was in
Ich habe hervorgehoben, um zentriert werden,

834
00:37:56,780 --> 00:38:00,270
das ist, warum ich habe Leitung 21 und
die entsprechende Zeile 31.

835
00:38:00,270 --> 00:38:04,820
Aber nehmen wir wollen nun John sagen
Harvard, herzlich willkommen auf meiner Homepage.

836
00:38:04,820 --> 00:38:06,530
>> Copyright-Symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
Und wenn ich die erste von
diese Linien zu sein ziemlich groß.

838
00:38:09,180 --> 00:38:10,450
36 Pixel.

839
00:38:10,450 --> 00:38:11,530
Also das ist eine anständige Größe.

840
00:38:11,530 --> 00:38:13,240
Und ich wollte sein Gewicht, kühn zu sein.

841
00:38:13,240 --> 00:38:15,450
Aber dann darunter,
Ich möchte kleineren Text.

842
00:38:15,450 --> 00:38:19,980
Und darunter, ich will
noch kleiner Text.

843
00:38:19,980 --> 00:38:20,480
Es tut uns leid.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Heute fühlt sich an wie einen freien Tag.

846
00:38:26,940 --> 00:38:29,840
>> So, jetzt, was mache ich, dies zum Ausdruck bringen?

847
00:38:29,840 --> 00:38:34,580
Hier auf der Leitung 22 ist ein Embedded-
div oder verschachtelte div, wenn man so will.

848
00:38:34,580 --> 00:38:36,190
Auch er hat seinen eigenen Stil-Tag.

849
00:38:36,190 --> 00:38:38,160
Ich geben Sie eine Schriftgröße von 36.

850
00:38:38,160 --> 00:38:40,460
Ich eine Schriftstärke der mutigen angeben.

851
00:38:40,460 --> 00:38:43,360
Hier unten, habe ich nur geben 24 Pixel.

852
00:38:43,360 --> 00:38:45,960
Und schließlich, in der Leitung 28, I 12 angeben.

853
00:38:45,960 --> 00:38:49,070
Also nur als eine schnelle Plausibilitätsprüfung
und als Mensch liest,

854
00:38:49,070 --> 00:38:52,545
die Wörter auf dem Bildschirm sind
eigentlich vor sich geht, kühn zu sein?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Welche Linien sind tatsächlich Fett?

857
00:38:58,760 --> 00:38:59,570
>> Nur John Harvard.

858
00:38:59,570 --> 00:39:00,070
Recht?

859
00:39:00,070 --> 00:39:05,940
Denn ebenso wie die Leitung 22 sagt, hey
Browser, hier ist ein Unternehmensbereich der Seite.

860
00:39:05,940 --> 00:39:07,920
Machen Sie es Schriftgröße 36 Punkt.

861
00:39:07,920 --> 00:39:09,460
Machen Sie den Schriftschnitt fett.

862
00:39:09,460 --> 00:39:11,920
Sobald Sie erreichen die
entsprechendes End-Tag

863
00:39:11,920 --> 00:39:15,340
oder geschlossenen Tag auf der Leitung 24,
das bedeutet, hey-Browser,

864
00:39:15,340 --> 00:39:17,640
aufhören, was es ist, Sie tun.

865
00:39:17,640 --> 00:39:21,020
Und Mitteilung an klar sein, auch wenn
Linie 22 hat all diese Attribute

866
00:39:21,020 --> 00:39:24,430
wie Stil, wenn Sie
schließen Sie den Tag in der Leitung 24,

867
00:39:24,430 --> 00:39:25,940
Sie nur zu erwähnen den Namen des Tags.

868
00:39:25,940 --> 00:39:29,990
>> Sie müssen nicht das Wort Stil wiederholen oder
alles, was im Inneren dieser Zitate ist.

869
00:39:29,990 --> 00:39:32,860
Und so, wenn ich mir das jetzt
in meinem Browser, lassen Sie uns

870
00:39:32,860 --> 00:39:38,060
einen Blick auf das Endergebnis. Lass mich gehen
vor, um diese Datei, die CSS 0 ist.

871
00:39:38,060 --> 00:39:41,814
Und es ist immer noch ziemlich einfach,
aber immer ziemlich interessant.

872
00:39:41,814 --> 00:39:43,980
Aber es stellt sich heraus, es gibt
andere Dinge, die ich hier tun,

873
00:39:43,980 --> 00:39:46,490
und auf die Gefahr der Herstellung von
Dieses komplett scheußlich,

874
00:39:46,490 --> 00:39:48,630
bemerken hier, dass in meinem
Körper meiner Web-Seite,

875
00:39:48,630 --> 00:39:53,930
Ich kann etwas lustiges zu tun
wie bg oder Hintergrundfarbe.

876
00:39:53,930 --> 00:39:56,670
>> Und schnell, was ist deine Lieblingsfarbe?

877
00:39:56,670 --> 00:39:57,720
Grüne Ich hörte.

878
00:39:57,720 --> 00:39:58,750
Gut.

879
00:39:58,750 --> 00:40:02,920
So, jetzt, wenn ich getroffen reload jetzt,
wir haben eine grüne Web-Seite.

880
00:40:02,920 --> 00:40:04,710
In Ordnung, das ist also nicht schlecht.

881
00:40:04,710 --> 00:40:08,350
Und jetzt, wenn ich will, dies zu machen, wirklich
cool, kann ich die Farbe meines Textes zu machen

882
00:40:08,350 --> 00:40:09,360
sogar rot.

883
00:40:09,360 --> 00:40:10,870
Also mal sehen, wie das aussieht.

884
00:40:10,870 --> 00:40:12,230
Jetzt ist es sieht ziemlich gut.

885
00:40:12,230 --> 00:40:15,460
Und hier unten, wenn Sie wirklich
zu verwirren wollen mit jemandem

886
00:40:15,460 --> 00:40:17,487
oder wenn Sie wollen
einer jener Menschen, die

887
00:40:17,487 --> 00:40:20,570
versucht, Sie zum Besuch einer Web-Trick
Seite, weil sie Google ausgetrickst haben

888
00:40:20,570 --> 00:40:27,610
zu denken, es gibt eine ganze Reihe
Schlagwort like-- mal sehen, neu zu laden.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Wo ist es hin?

891
00:40:30,680 --> 00:40:31,530
Und da es uns.

892
00:40:31,530 --> 00:40:32,030
Gut.

893
00:40:32,030 --> 00:40:34,905
Also sage ich so nebenbei, wir
sprechen über diese Dinge in ein paar Wochen

894
00:40:34,905 --> 00:40:36,740
wenn wir reden
Sicherheit, wenn Sie tatsächlich

895
00:40:36,740 --> 00:40:38,852
einbetten ganze Trauben von
Keywords in einer Web-Seite,

896
00:40:38,852 --> 00:40:41,810
auch wenn sie nicht sichtbar ein
Mensch, jemand wie Google, natürlich,

897
00:40:41,810 --> 00:40:43,250
noch tatsächlich finden diese.

898
00:40:43,250 --> 00:40:45,820
Na gut, so dass es ziemlich
abscheulichen ziemlich schnell.

899
00:40:45,820 --> 00:40:48,420
>> Und in der Tat, es ist nicht alles
dass viel anders als meine eigene Web-

900
00:40:48,420 --> 00:40:51,480
Seite als Student, die
Ich begann googeln um zu finden

901
00:40:51,480 --> 00:40:53,690
früheren Versionen von meinem alten Webseiten.

902
00:40:53,690 --> 00:40:54,500
Es war ziemlich schlecht.

903
00:40:54,500 --> 00:40:56,650
In der Tat, ich finde,
eine kurz vor der Klasse.

904
00:40:56,650 --> 00:40:58,620
Aber es ist noch schlechter da draußen.

905
00:40:58,620 --> 00:41:01,534
Dies war offenbar meine
Heim Rückkehr im Jahr 1996.

906
00:41:01,534 --> 00:41:04,200
Anscheinend Ich dachte, es war
angebracht, die Leute fragen, ihren Namen

907
00:41:04,200 --> 00:41:05,991
bevor sie
tatsächlich sehen, meine Web-Seite.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> Und dann zeigte ich ihnen
etwas dumm, wahrscheinlich.

910
00:41:11,920 --> 00:41:13,450
Ich werde graben, bis mehr für die nächste Zeit.

911
00:41:13,450 --> 00:41:16,220
Aber jetzt lasst uns
Sehen Sie sich ein bisschen Design.

912
00:41:16,220 --> 00:41:17,444
Wir haben darüber gesprochen Stil.

913
00:41:17,444 --> 00:41:19,735
Und diese Seite so weit und
die meisten alles, was ich geschrieben habe

914
00:41:19,735 --> 00:41:21,890
ist ziemlich sauber stilistisch.

915
00:41:21,890 --> 00:41:23,320
Aber was ist Design?

916
00:41:23,320 --> 00:41:25,990
Nun, es gibt eine Menge von Redundanz
in dem, was ich hier tue.

917
00:41:25,990 --> 00:41:28,156
>> Ich habe das Wort erwähnt
Farbe in ein paar Plätze.

918
00:41:28,156 --> 00:41:31,630
Ich habe Schriftgröße erwähnt in ein paar
Orte und fett in ein paar Plätze.

919
00:41:31,630 --> 00:41:34,870
Und im Grunde bin ich Co
Vermischung zwei Sprachen.

920
00:41:34,870 --> 00:41:38,100
Ich habe mit meinem HTML-Tags und bekam meine
Attribute und dann ganz plötzlich,

921
00:41:38,100 --> 00:41:40,100
in Anführungszeichen, ich habe
die zweite Sprache heute

922
00:41:40,100 --> 00:41:43,830
genannt CSS, die wiederum, ist nur diese
Schlüssel-Wert-Paare oder diese Eigenschaften

923
00:41:43,830 --> 00:41:45,280
durch Doppelpunkte getrennt.

924
00:41:45,280 --> 00:41:47,700
>> Es stellt sich heraus, dass ein Groß
wie in C, wo wir

925
00:41:47,700 --> 00:41:50,550
können Sie beginnen, aus Faktor
einige Code in Header-Dateien,

926
00:41:50,550 --> 00:41:53,520
so dass wir das Gleiche tun in HTML.

927
00:41:53,520 --> 00:41:56,030
Und einen Schritt, auf das, ist wie folgt.

928
00:41:56,030 --> 00:42:02,230
Beachten Sie, dass diese Version ist CSS1.html
strukturell genau die gleiche Web-Seite.

929
00:42:02,230 --> 00:42:05,250
Also habe ich eine ganze Reihe bekam
der divs, aber dieses Mal, ich habe

930
00:42:05,250 --> 00:42:07,220
losgeworden der Umhüllung
div wie Sie sehen werden.

931
00:42:07,220 --> 00:42:12,390
>> Und ich habe diese drei divs gegeben
oberen, mittleren und unteren, eindeutige IDs.

932
00:42:12,390 --> 00:42:14,760
Das ist schön, denn durch
geben diese Divisionen

933
00:42:14,760 --> 00:42:18,715
der Seite eindeutige Kennungen,
Ich kann sie an anderer Stelle verweisen.

934
00:42:18,715 --> 00:42:19,215
Wo?

935
00:42:19,215 --> 00:42:21,070
Nun, lassen Sie mich nach oben.

936
00:42:21,070 --> 00:42:24,070
Und so weit, zu jeder Zeit haben wir sah
an der Spitze von einer Web-Seite, was ist

937
00:42:24,070 --> 00:42:28,560
der einzige Tag wir hatten
der Kopf einer Web-Seite?

938
00:42:28,560 --> 00:42:29,740
Ein wenig lauter.

939
00:42:29,740 --> 00:42:30,799
Nur der Titel so weit.

940
00:42:30,799 --> 00:42:32,590
Aber es stellt sich heraus, es gibt
ein paar andere Dinge

941
00:42:32,590 --> 00:42:35,840
Sie in es gesetzt ist, eine der
was es heißt ein Stil-Tag.

942
00:42:35,840 --> 00:42:37,850
Also vor einem Augenblick haben wir uns
bei einem style-Attribut.

943
00:42:37,850 --> 00:42:39,150
Stellt sich heraus, es ist ein Stil-Tags.

944
00:42:39,150 --> 00:42:41,200
Es gehört Innenseite
der Kopf einer Webseite.

945
00:42:41,200 --> 00:42:42,840
Und nun merken, was ich tue.

946
00:42:42,840 --> 00:42:46,540
Ich habe innerhalb dieses
Stil-Tags die folgende.

947
00:42:46,540 --> 00:42:51,190
Ich bin buchstäblich erwähnens in Zeile 20 der
Name eines TAG, das möchte ich zu stilisieren.

948
00:42:51,190 --> 00:42:53,489
>> Dann habe ich offene geschweifte Klammer
und geschlossene geschweifte Klammer.

949
00:42:53,489 --> 00:42:56,030
Also im Geiste gleich C, aber
Auch dies ist keine Funktion ist,

950
00:42:56,030 --> 00:42:57,796
das ist nur eine syntaktische Detail.

951
00:42:57,796 --> 00:43:00,170
Und dann natürlich, ich sage
der Browser, hey-Browser,

952
00:43:00,170 --> 00:43:05,210
machen den ganzen Körper auf der Seite
eine Textausrichtung von der Mitte.

953
00:43:05,210 --> 00:43:06,930
Und dann dieser sagt das Folgende.

954
00:43:06,930 --> 00:43:12,600
Hey-Browser, wenn Sie eine HTML zu sehen
Element oder Tag in die Seite,

955
00:43:12,600 --> 00:43:17,040
hat eine eindeutige Kennung von oben,
so dass die Raute hier bedeutet nur,

956
00:43:17,040 --> 00:43:21,010
einzigartige Idee der Spitze, voran gehen
und stellen ihre Schriftgröße 36

957
00:43:21,010 --> 00:43:22,490
und seine Schriftstärke fett.

958
00:43:22,490 --> 00:43:26,840
>> Hey-Browser, ein Element, dessen
ID ist Mitte, machen es 24 Pixel.

959
00:43:26,840 --> 00:43:31,070
Und hey-Browser, wenn Sie sehen, ein
Vorstellung von unten, machen es 12 Pixel.

960
00:43:31,070 --> 00:43:33,540
Der Effekt am Ende
ist genau das sam.

961
00:43:33,540 --> 00:43:36,500
Wenn ich in CSS 1 zu gehen, die
Seite gleich aussieht.

962
00:43:36,500 --> 00:43:39,810
Aber wir sind ein Schritt in Richtung
ein etwas besseres Design.

963
00:43:39,810 --> 00:43:44,850
Lassen Sie mich nun hier zurück zu CSS2
und sehen, was ich getan habe.

964
00:43:44,850 --> 00:43:48,030
>> Nun ist die Seite ist wirklich sehr, sehr sauber.

965
00:43:48,030 --> 00:43:50,730
In der Tat kann ich alle passen
der Inhalt auf einer Seite hier.

966
00:43:50,730 --> 00:43:54,270
Aber welche neuen Tag Ich habe
eingeführt, natürlich?

967
00:43:54,270 --> 00:43:54,770
Link.

968
00:43:54,770 --> 00:43:57,853
Und es ist nicht der beste Name für einen Tag,
denn es ist nicht ein Glied in dem Sinne,

969
00:43:57,853 --> 00:44:00,780
dass wir es kennen, aber das bedeutet,
ein Link auf eine andere Datei.

970
00:44:00,780 --> 00:44:02,890
Das ist eine Art, wie scharf sind in C.

971
00:44:02,890 --> 00:44:06,280
>> Dies ist der Weg in HTML
hey Browser zu sagen,

972
00:44:06,280 --> 00:44:10,240
gehen Sie die Inhalte
Die Datei mit dem Namen css2.css.

973
00:44:10,240 --> 00:44:12,880
Das Verhältnis, zu mir,
ist, dass es ein Stylesheet.

974
00:44:12,880 --> 00:44:17,980
Und in der Tat ist das, was den einen der
S in Cascading Style Sheets Mittel.

975
00:44:17,980 --> 00:44:20,350
Dies ist ein Stylesheet.

976
00:44:20,350 --> 00:44:23,120
Es ist nur die Textdatei,
eine ganze Reihe von Immobilien.

977
00:44:23,120 --> 00:44:25,940
Es ist eine ganze Reihe von Arten
, dass Sie auf eine Seite anwenden möchten.

978
00:44:25,940 --> 00:44:28,860
>> Und so ist offenbar
Bezugnahme auf eine zweite Datei.

979
00:44:28,860 --> 00:44:32,970
Und wenn ich öffnen Sie diese, CSS2.css,
feststellen, dass alles, was ich getan habe,

980
00:44:32,970 --> 00:44:35,900
ist Kopieren Sie alle
dies in dieser Datei.

981
00:44:35,900 --> 00:44:38,220
Und jetzt, auch wenn Sie noch nie habe
codiert dieses Zeug vor,

982
00:44:38,220 --> 00:44:40,700
nur als mit dem
sprichwörtlichen Hut Technik

983
00:44:40,700 --> 00:44:44,220
auf, warum ist dies ein
besseres Design wohl?

984
00:44:44,220 --> 00:44:48,910
Unter Ausklammerung dieser CSS-Eigenschaften,
setzen sie in ihrer eigenen Datei.

985
00:44:48,910 --> 00:44:51,330
Auch wenn wir dies lösen
Vor Problem wie 5 Minuten

986
00:44:51,330 --> 00:44:52,600
in der ersten Version.

987
00:44:52,600 --> 00:44:55,730
>> Wir haben nicht verbessert die
Seite stilistisch,

988
00:44:55,730 --> 00:44:57,520
dies ist nur besser
Design in einem gewissen Sinn.

989
00:44:57,520 --> 00:44:58,990
Warum meinst du?

990
00:44:58,990 --> 00:45:01,510
Ja.

991
00:45:01,510 --> 00:45:02,260
Flexibler, wie?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Ja.

994
00:45:05,540 --> 00:45:07,373
Also, wenn Sie gehen wollen
Rücken und die Dinge ändern,

995
00:45:07,373 --> 00:45:09,540
Jetzt, an einem Ort haben Sie
wo Sie die Dinge zu ändern.

996
00:45:09,540 --> 00:45:11,622
Und in der Tat etwas
wie Problem stellte sieben,

997
00:45:11,622 --> 00:45:13,690
wo wir eine Umsetzung
Aktien den Handel Website,

998
00:45:13,690 --> 00:45:15,523
das wird eine haben
ganze Reihe von Seiten.

999
00:45:15,523 --> 00:45:17,620
Und es wäre wirklich
ärgerlich, wenn Sie sich entscheiden, hm,

1000
00:45:17,620 --> 00:45:21,630
Ich weiß nicht wirklich wie 24 Pixel, ich will
es 28 Pixel oder etwas größer sein.

1001
00:45:21,630 --> 00:45:23,550
Und dann müssen Sie ein zu tun
global suchen und ersetzen

1002
00:45:23,550 --> 00:45:27,560
oder alle Dateien Ihrer Website öffnen
einfach auf einen Wert tatsächlich zu ändern.

1003
00:45:27,560 --> 00:45:31,290
Durch Ausklammerung diese Stile
in einem zentralen Ort,

1004
00:45:31,290 --> 00:45:34,720
Sie können jetzt eine Textdatei zu öffnen
in CS50IDE in jedes Programm,

1005
00:45:34,720 --> 00:45:36,479
ändern, speichern und fertig.

1006
00:45:36,479 --> 00:45:38,270
Sie haben solche propagiert
Veränderungen überall.

1007
00:45:38,270 --> 00:45:42,450
Und daß die gleiche sein würde
in einem Punkt h-Datei als auch.

1008
00:45:42,450 --> 00:45:46,697
Also Fragen so
weit über diese Syntax?

1009
00:45:46,697 --> 00:45:48,530
Na gut, also haben wir
alles getan, was es scheint,

1010
00:45:48,530 --> 00:45:51,170
Ausnahme tatsächlich umzusetzen Hyperlinks.

1011
00:45:51,170 --> 00:45:52,740
Und so lassen Sie uns fortfahren und tun dies.

1012
00:45:52,740 --> 00:45:54,830
Lassen Sie mich gehen Sie vor und
Erstellen einer neuen Datei hier.

1013
00:45:54,830 --> 00:45:59,970
Ich werde es nennen
link.html, in der heutigen Code zu setzen.

1014
00:45:59,970 --> 00:46:03,000
>> Und ich werde offen zu tun,
Halterung doc-Typ html.

1015
00:46:03,000 --> 00:46:05,970
Nebenbei bemerkt, diese Sache auf die
top, diese doc Typ-Deklaration,

1016
00:46:05,970 --> 00:46:08,420
es ist das einzige, das ist seltsam
mit dem Ausrufezeichen.

1017
00:46:08,420 --> 00:46:12,100
Sie müssen nur, um es dort zu tun und es
bedeutet, dass wir mit Hilfe von HTML-Version 5.

1018
00:46:12,100 --> 00:46:14,460
Ältere Versionen von
Sprache hatten viel länger

1019
00:46:14,460 --> 00:46:16,400
Zeichenfolgen, die Sie benötigt, um dort setzen.

1020
00:46:16,400 --> 00:46:18,620
So, hier ist ein Beispiel nannte Link.

1021
00:46:18,620 --> 00:46:20,950
>> Ich brauche einen Körper aus meiner Web-Seite hier.

1022
00:46:20,950 --> 00:46:29,770
Und hier, ein href equals
sagen wir HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
und meine Lieblings-Website, werden wir sagen.

1024
00:46:35,420 --> 00:46:38,550
Na gut, so eine sehr
harmlose, benutzerfreundliche Seite.

1025
00:46:38,550 --> 00:46:42,950
Wenn ich nun in meinem Verzeichnis gehen
Listing hier und eröffnen link.html,

1026
00:46:42,950 --> 00:46:44,780
Wir haben Hypertext.

1027
00:46:44,780 --> 00:46:47,410
>> Und in der Tat ist dies, wo
das H in HTTP kommt.

1028
00:46:47,410 --> 00:46:51,580
Hypertext Transfer Protocol
ist zum Übertragen von Text

1029
00:46:51,580 --> 00:46:53,840
das hat Hyperlinks zu anderen Ressourcen.

1030
00:46:53,840 --> 00:46:58,210
Und in der Tat, hier ist die vertraute,
wenn retro, blauen Link, wenn angeklickt,

1031
00:46:58,210 --> 00:47:02,607
tatsächlich führen mich zu Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Nun, oh, das ist bald heraus.

1033
00:47:03,940 --> 00:47:08,970
Also gut, jetzt, was sind einige
der Auswirkungen der das?

1034
00:47:08,970 --> 00:47:11,610
>> Und ehrlich gesagt, beginnt die Welt
ein wenig mehr vertraut machen

1035
00:47:11,610 --> 00:47:15,090
und auch ein wenig gruseliger
sondern auch ein wenig

1036
00:47:15,090 --> 00:47:17,840
selbstverteidigungs sobald Sie beginnen
diese Dinge zu verstehen.

1037
00:47:17,840 --> 00:47:21,610
Weil Chancen sind, einige von Ihnen, wenn Sie gehen,
durch Ihre Google Mail Spam-Ordner oder sogar

1038
00:47:21,610 --> 00:47:23,990
Ihren Posteingang, wahrscheinlich haben Sie
bekommen eine Art von E-Mail-

1039
00:47:23,990 --> 00:47:26,980
daß bittet Sie ändern Ihre
Kennwort vielleicht oder vielleicht überprüfen

1040
00:47:26,980 --> 00:47:28,910
Ihrem PayPal-Berechtigungsnachweise oder Dingsbums.

1041
00:47:28,910 --> 00:47:34,510
>> Und in der Tat, die Sie erhalten haben könnte
etwas, das wie, klicken Sie hier sagt,

1042
00:47:34,510 --> 00:47:42,260
mit Ihrem PayPal-Passwort zurückzusetzen.

1043
00:47:42,260 --> 00:47:44,130
Und nun feststellen, ob
dies ist nicht Disney.com

1044
00:47:44,130 --> 00:47:51,600
aber wie badplace.com und
neu zu laden, beachten Sie, dass der Text hier

1045
00:47:51,600 --> 00:47:53,710
könnte irgend etwas zu sagen.

1046
00:47:53,710 --> 00:47:55,260
Und in der Tat ist dies nur Worte.

1047
00:47:55,260 --> 00:48:04,610
Warum kann ich nicht wirklich Super bösartig sein
und sagen, http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Klicken Sie hier, setzen Sie Ihr PayPal
Passwort und jetzt neu zu laden.

1049
00:48:14,090 --> 00:48:16,220
Das sieht ziemlich legitim, nicht wahr?

1050
00:48:16,220 --> 00:48:20,470
Ich meine, ich würde nicht klicken Sie auf
eine E-Mail, die gerade das sagt.

1051
00:48:20,470 --> 00:48:22,450
Aber beachten Sie die Dichotomie hier.

1052
00:48:22,450 --> 00:48:26,880
Er sagt www.paypal.com,
und in der Tat, warten Sie eine Minute,

1053
00:48:26,880 --> 00:48:29,210
wir wissen, dass Sie wollen,
die s für die Sicherheit.

1054
00:48:29,210 --> 00:48:35,450
So, jetzt gehen Sie zu www.paypal.com HTTPS,
aber wenn Sie noch nie getan habe, bevor,

1055
00:48:35,450 --> 00:48:38,182
Sie in die Gewohnheit, zu erhalten
schwebt über kleine Links.

1056
00:48:38,182 --> 00:48:39,890
Und es ist schwer zu sehen,
dort dem Bildschirm,

1057
00:48:39,890 --> 00:48:41,340
und es ist gar nicht so einfach hier.

1058
00:48:41,340 --> 00:48:43,615
Aber hier hinunter in
die winzig kleine Ecke

1059
00:48:43,615 --> 00:48:45,740
funktioniert der Browser tatsächlich
Ihnen sagen, dass wir gehen,

1060
00:48:45,740 --> 00:48:48,850
statt Paypal.com badplace.com.

1061
00:48:48,850 --> 00:48:51,620
Nun, wohin gehen wir damit um?

1062
00:48:51,620 --> 00:48:54,859
Alle Beispiele haben wir heute getan,
wir haben hart codiert und aus manuell eingegeben.

1063
00:48:54,859 --> 00:48:56,900
Das Web ist unglaublich
uninteressant, wenn man hart

1064
00:48:56,900 --> 00:48:59,844
codieren Ihre Web-Seiten, so dass die Inhalte
statisch ist und sich nie ändern.

1065
00:48:59,844 --> 00:49:01,760
Selbstverständlich sind alle unsere
Lieblings-Websites heute,

1066
00:49:01,760 --> 00:49:04,470
ob es sich um Google Mail oder Twitter oder
Book oder eine beliebige Anzahl anderer

1067
00:49:04,470 --> 00:49:05,290
sind dynamisch.

1068
00:49:05,290 --> 00:49:07,340
Sie verändern in
Reaktion auf Benutzereingaben

1069
00:49:07,340 --> 00:49:08,840
genau wie die Google-Suchergebnissen.

1070
00:49:08,840 --> 00:49:12,415
>> Und so am Mittwoch, was wir tun,
verlassen wir HTML und CSS Einführung

1071
00:49:12,415 --> 00:49:14,290
hinter uns und wir nehmen
für, dass wir selbstverständlich jetzt

1072
00:49:14,290 --> 00:49:16,640
wissen und wir präsentieren
eine neue Programmiersprache

1073
00:49:16,640 --> 00:49:19,050
genannt PHP, die wie
C, wird uns geben,

1074
00:49:19,050 --> 00:49:22,450
die Macht, tatsächlich Programme zu erstellen
dass selbst Ausgabe generiert.

1075
00:49:22,450 --> 00:49:25,900
In diesem Fall werden wir mit
PHP dynamisch zu generieren Web-

1076
00:49:25,900 --> 00:49:27,340
Seiten mit dieser neuen Sprache.

1077
00:49:27,340 --> 00:49:28,989
Also mehr dazu am Mittwoch.

1078
00:49:28,989 --> 00:49:29,530
Bis dann.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Musikwiedergabe]

1081
00:49:37,380 --> 00:52:38,864