1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Heute werde ich zu gehen
sprechen ein wenig über HTML,

3
00:00:10,450 --> 00:00:12,330
Hypertext Markup Language.

4
00:00:12,330 --> 00:00:14,450
Sie sehen HTML überall in diesen Tagen.

5
00:00:14,450 --> 00:00:17,190
In der Tat, wenn Sie beobachten diese
Video in einem Browser, sind Sie

6
00:00:17,190 --> 00:00:19,120
jetzt sehen, HTML.

7
00:00:19,120 --> 00:00:22,760
HTML ist keine Programmiersprache,
vielmehr eine Markup-Sprache verwendet, ist es

8
00:00:22,760 --> 00:00:25,460
Web-Browser, um Seiten zu machen
über das Internet.

9
00:00:25,460 --> 00:00:30,410
>> So könnte man fragen, wie genau ist das Schreiben
eine Web-Seite in HTML verschiedene

10
00:00:30,410 --> 00:00:33,574
aus ein Programm in einer Programmiersprache zu schreiben
Sprache wie C?

11
00:00:33,574 --> 00:00:38,010
Nun, C ist eine Sprache mit sehr strengen
syntaktischen Regeln, die sein muss

12
00:00:38,010 --> 00:00:39,880
zusammengestellt, bevor sie ausgeführt werden können.

13
00:00:39,880 --> 00:00:43,070
Wenn Sie schon einmal vergessen haben, gehören ein
Semikolon am Ende einer Anweisung in

14
00:00:43,070 --> 00:00:46,660
Ihre C-Code, wissen Sie, wovon ich rede
etwa in Bezug auf die strengen Syntax.

15
00:00:46,660 --> 00:00:50,360
>> Web-Browser sind jedoch ein wenig
verzeihen, wenn es um HTML geht.

16
00:00:50,360 --> 00:00:53,860
Selbst wenn Ihr HTML ist nicht syntaktisch
richtig, können Ihre Seite noch sein

17
00:00:53,860 --> 00:00:57,150
von einem Browser angezeigt wird, aber es könnte
nicht aus, als Sie gedacht.

18
00:00:57,150 --> 00:00:59,640
So ist es immer am besten,
die Regeln einhalten.

19
00:00:59,640 --> 00:01:01,990
Der beste Weg, um ein Gespür zu bekommen
wie die Dinge Arbeit ist es,

20
00:01:01,990 --> 00:01:03,300
gehen durch ein Beispiel.

21
00:01:03,300 --> 00:01:07,360
>> Also, was wir hier haben, ist ein Grund
Blaupause für eine Web-Seite.

22
00:01:07,360 --> 00:01:10,690
Sie haben wahrscheinlich bemerkt, eine Menge Dinge
zwischen spitzen Klammern.

23
00:01:10,690 --> 00:01:12,900
Nun, das sind nur Schlagworte.

24
00:01:12,900 --> 00:01:15,810
Schlagwörter grundsätzlich informieren Web-Browser
dass, hey, etwas

25
00:01:15,810 --> 00:01:17,150
ist im Anflug.

26
00:01:17,150 --> 00:01:20,770
Denken Sie jedoch daran, wenn Sie öffnen ein
-Tag, um es zu schließen, sobald Sie sind müssen Sie

27
00:01:20,770 --> 00:01:21,750
Sie es getan.

28
00:01:21,750 --> 00:01:24,690
>> So zum Beispiel, einen Abschnitt zu öffnen I
Code mit offenen

29
00:01:24,690 --> 00:01:26,960
Klammerkörper, Klammer zu.

30
00:01:26,960 --> 00:01:31,280
Ich habe dann einen Text hinzufügen, in diesem Fall, mein
erste Web-Seite dann als ich ging,

31
00:01:31,280 --> 00:01:35,540
Schließen dieser Sektion, verwende ich fast eine
identisch Tag außer dieser Zeit mit einer

32
00:01:35,540 --> 00:01:37,660
Schrägstrich vor dem Körper.

33
00:01:37,660 --> 00:01:41,140
In der Regel ist dies das Format Sie
verwenden wollen, wann immer Sie öffnen

34
00:01:41,140 --> 00:01:42,680
und schließende Tags.

35
00:01:42,680 --> 00:01:47,900
Gemeinsam eine offene-Tag und einem End-Tag
komponieren, was ein Element bezeichnet.

36
00:01:47,900 --> 00:01:51,870
>> Wenn Sie in der ersten Zeile anschauen, werden Sie
sehen Sie ein Ausrufezeichen gefolgt von

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
Das ist wirklich nur sagen Ihrem Browser
, dass die Datei eine Web-Seite

39
00:01:56,280 --> 00:01:58,280
in HTML geschrieben.

40
00:01:58,280 --> 00:02:01,970
Der HTML-Tag sagt im Wesentlichen,
hier kommt einige HTML.

41
00:02:01,970 --> 00:02:04,950
Dann haben wir eine Kopf-Tag mit
ein Titel-Tag in seinem Inneren.

42
00:02:04,950 --> 00:02:09,430
Der Kopf der Tag, das Sie sich vorstellen können, wie
bestehend aus HTML-Code, der für kommt

43
00:02:09,430 --> 00:02:12,670
der Großteil Ihrer Web-Seite
eigentlichen Inhalt.

44
00:02:12,670 --> 00:02:16,700
>> In der Regel den Titel setzen Sie Ihre
Webseite hier, obwohl es einige

45
00:02:16,700 --> 00:02:19,350
andere Tags, die angezeigt werden können
auch hier.

46
00:02:19,350 --> 00:02:25,020
Als nächstes kommt Ihr Körper Web-Seite, die
Ist Fleisch und Knochen von Ihrer Website.

47
00:02:25,020 --> 00:02:28,910
In unserem Beispiel haben wir gerade gestellt habe eine einfache
Satz, meine erste Webseite,

48
00:02:28,910 --> 00:02:34,100
, die, wenn wir unser Website aussehen wird
ein wenig etwas wie dieses.

49
00:02:34,100 --> 00:02:36,810
Unsere Web-Seite ist nicht zu eigenartig,
aber keine Sorge.

50
00:02:36,810 --> 00:02:39,210
Wir werden es bald Fichte.

51
00:02:39,210 --> 00:02:44,070
>> Also die oben HTML, wir geben Ihnen eine sehr
Grund Vorlage für eine Web-Seite,

52
00:02:44,070 --> 00:02:46,310
nichts Besonderes, nur die blanken Knochen.

53
00:02:46,310 --> 00:02:49,160
Aber wenn ich die Erstellung einer Web-Seite,
was, wenn ich eine hinzufügen

54
00:02:49,160 --> 00:02:50,760
Bild von, sagen wir, mir selbst?

55
00:02:50,760 --> 00:02:52,760
Nun, ich kann das tun.

56
00:02:52,760 --> 00:02:55,460
Es gibt ein paar Möglichkeiten,
Bilder hinzufügen, um Ihre Website.

57
00:02:55,460 --> 00:02:59,780
Wenn das Bild in den gleichen Ordner wie
Ihre HTML-Datei, können Sie auf den Link

58
00:02:59,780 --> 00:03:01,950
Bild über den Weg wie dieses.

59
00:03:01,950 --> 00:03:05,910
>> Sie öffnen mit einem Image-Tag, gefolgt
durch in Alt-Attribut in der

60
00:03:05,910 --> 00:03:07,240
Quelle des Bildes.

61
00:03:07,240 --> 00:03:12,030
Der Wert des Alt-Attribut ist nur einige
Alternativtext, falls ein Benutzer nicht

62
00:03:12,030 --> 00:03:13,580
sehen Sie das Bild.

63
00:03:13,580 --> 00:03:19,680
Alternativ können Sie auch die auf
Bilder über eine vollständige URL, wie diese.

64
00:03:19,680 --> 00:03:24,180
Nun bedeutet, dass die Website nicht wirklich existiert,
aber wenn es ein Bild von

65
00:03:24,180 --> 00:03:27,760
mich an dieser Adresse, die ich verwenden könnte
die Quell-URL zu schließen

66
00:03:27,760 --> 00:03:29,930
sein Bild auf meiner Webseite.

67
00:03:29,930 --> 00:03:35,590
So oder so, Sie am Ende mit einem viel
hübscher Website, etwas wie dieses.

68
00:03:35,590 --> 00:03:39,730
>> Nun, das ist ziemlich cool, aber ich Art
wollen einige der Text auch hier.

69
00:03:39,730 --> 00:03:43,020
Also lassen Sie uns nur etwas hinzufügen
super einfach über die

70
00:03:43,020 --> 00:03:45,210
Bild, wie der Kopfzeile.

71
00:03:45,210 --> 00:03:50,830
Alles, was ich bisher gemacht habe ist die Kopfzeile verwenden
tag, H1, und ein Zeilenumbruch-Tag, br.

72
00:03:50,830 --> 00:03:54,900
Die Header-Tag macht die Schrift ein wenig
etwas größer und mehr im Vordergrund.

73
00:03:54,900 --> 00:03:58,930
Der Zeilenumbruch-Tag, auf der anderen
Seits ist irgendwie cool.

74
00:03:58,930 --> 00:04:03,720
Anders als die meisten anderen Tags, die Sie nicht haben,
ein Öffnen und Schließen Pause-Tag, nur

75
00:04:03,720 --> 00:04:05,120
die oben gezeigte einem.

76
00:04:05,120 --> 00:04:10,420
Dies liegt daran, Pause hat keinen Inhalt
und ist daher ein leeres Element.

77
00:04:10,420 --> 00:04:14,940
>> Leere Elemente wie diese, die Sie öffnen können
und gleichzeitig in der Nähe einfach durch

78
00:04:14,940 --> 00:04:20,420
einschließlich einem Schrägstrich am
Ende der ersten Erklärung.

79
00:04:20,420 --> 00:04:24,390
So, jetzt meine Website sieht ein wenig
so etwas.

80
00:04:24,390 --> 00:04:27,410
Besser, aber es ist irgendwie fühlt
wie eine Sackgasse.

81
00:04:27,410 --> 00:04:30,850
Es gibt nirgendwo sonst beiseite zu gehen
von dieser Seite an.

82
00:04:30,850 --> 00:04:33,075
Nun, lassen Sie beheben, dass durch die
mit einem Link.

83
00:04:33,075 --> 00:04:36,860
>> Was ich hier tun, ist eine
Attribut erkennbar am und machen die

84
00:04:36,860 --> 00:04:40,780
Bild einen Link zu, sagen wir, CS50-TV.

85
00:04:40,780 --> 00:04:44,460
So, wenn jemand auf mich klickt,
ihren Browser umgeleitet wird

86
00:04:44,460 --> 00:04:47,810
anderen, vermutlich
nützlich, Web-Seite.

87
00:04:47,810 --> 00:04:51,040
Ich habe, um die Größe der zu minimieren
Text ein wenig, weil unsere Web-Seite ist

88
00:04:51,040 --> 00:04:52,470
immer weiter fortgeschritten.

89
00:04:52,470 --> 00:04:54,590
Aber hoffentlich ist es immer noch klar.

90
00:04:54,590 --> 00:04:59,460
Meine Website sieht genau das gleiche nur
jetzt, wenn ich auf das Bild klicken,

91
00:04:59,460 --> 00:05:04,410
mein Browser öffnen ein weiteres
Registerkarte für die Web-Seite CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Schließlich sagen wir, ich bin um Stil geht
Diese Website später mit Hilfe von CSS.

93
00:05:08,970 --> 00:05:11,730
CSS ist, was als eine bekannte
Cascading Style Sheet.

94
00:05:11,730 --> 00:05:15,230
Und es im Grunde ein effizientes
Weise zu bearbeiten und Stil

95
00:05:15,230 --> 00:05:16,910
Ähnliche Codeblöcke.

96
00:05:16,910 --> 00:05:21,290
Ich möchte beginnen Organisation meiner HTML
machen es einfacher, später Stil.

97
00:05:21,290 --> 00:05:26,900
Hier stellte ich zwei verschiedene Arten von
Kennungen zu helfen, meinen Code zu organisieren.

98
00:05:26,900 --> 00:05:31,170
Ich habe das ID-Attribut verwendet, innerhalb einer
Division oder div-Tag, und ich habe ein gebrauchtes

99
00:05:31,170 --> 00:05:34,120
Class-Attribut im Inneren
ein weiteres div-Tag.

100
00:05:34,120 --> 00:05:37,190
>> ID-und Klassenattribute
funktionieren ähnlich.

101
00:05:37,190 --> 00:05:41,210
Der einzige Unterschied ist, dass Sie nur können
ein Element, das spezifische ID,

102
00:05:41,210 --> 00:05:43,600
eine beliebige Anzahl von Elementen
können eine Klasse zu teilen.

103
00:05:43,600 --> 00:05:47,690
So zum Beispiel, kann ich die Klasse zu verwenden
Bild mehrmals, aber ich kann nicht

104
00:05:47,690 --> 00:05:50,533
erstellen Sie eine andere Abteilung
mit der ID-Spitze.

105
00:05:50,533 --> 00:05:54,750
Obwohl ich nicht in CSS weg,
eine andere Sprache häufig verwendet,

106
00:05:54,750 --> 00:05:59,700
neben HTML, sobald ich starten Styling
mein Code mit CSS, kann ich diese verwenden

107
00:05:59,700 --> 00:06:03,730
Organisations Attribute Einfluss
Ästhetik meiner Web-Seite.

108
00:06:03,730 --> 00:06:07,600
>> Alles, was innerhalb der Division oben
ähnlich Stylings oder welche haben

109
00:06:07,600 --> 00:06:12,010
andere Gruppe von HTML-I-Gruppe in der
Bildklasse wird einen ähnlichen Blick zu teilen.

110
00:06:12,010 --> 00:06:15,700
Das ist viel einfacher als zu versuchen, zu bearbeiten
und Stil Bilder oder Blöcke von

111
00:06:15,700 --> 00:06:17,690
Text individuell.

112
00:06:17,690 --> 00:06:21,480
>> Also über die Grundlagen, wie ging es
eine Web-Seite mit HTML zu machen.

113
00:06:21,480 --> 00:06:25,280
HTML hat eine Reihe von anderen Funktionen zu
dass, wenn gepaart mit anderen Sprachen

114
00:06:25,280 --> 00:06:29,220
wie CSS und JavaScript, wirklich kann
machen Seiten abheben.

115
00:06:29,220 --> 00:06:32,960
Der beste Weg, sich bequem zu machen
HTML ist nur zu Chaos mit sich herum,

116
00:06:32,960 --> 00:06:35,120
sehen, was funktioniert und was nicht.

117
00:06:35,120 --> 00:06:36,570
>> Mein Name ist Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Dies ist CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> So zum Beispiel, die ich verwenden kann
die Klasse Bild -

121
00:06:45,690 --> 00:06:48,028
Nein, es gibt so viele Attribute.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
Mein Name ist Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Dies ist CS 650.

125
00:06:58,560 --> 00:06:59,810
Ich möchte sagen, CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
Dies ist CSS.

128
00:07:03,575 --> 00:07:05,408