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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: I dag, vil jeg
snakke lidt om HTML,

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

4
00:00:12,330 --> 00:00:14,450
Du ser HTML overalt i disse dage.

5
00:00:14,450 --> 00:00:17,190
I virkeligheden, hvis du ser dette
video i en browser, er du

6
00:00:17,190 --> 00:00:19,120
se HTML lige nu.

7
00:00:19,120 --> 00:00:22,760
HTML er ikke et programmeringssprog,
snarere, det er et markup sprog, der bruges af

8
00:00:22,760 --> 00:00:25,460
webbrowsere på at gøre siderne
på internettet.

9
00:00:25,460 --> 00:00:30,410
>> Så du kan spørge, hvordan netop skriver
en webside i HTML anderledes

10
00:00:30,410 --> 00:00:33,574
fra at skrive et program i et programmeringssprog
sprog som C?

11
00:00:33,574 --> 00:00:38,010
Nå, C er et sprog med meget strenge
syntaktiske regler, der skal være

12
00:00:38,010 --> 00:00:39,880
udarbejdet før det kan køre.

13
00:00:39,880 --> 00:00:43,070
Hvis du nogensinde har glemt at medtage en
semikolon i slutningen af ​​en erklæring i

14
00:00:43,070 --> 00:00:46,660
din C-kode, du ved, hvad jeg taler
om i forhold til strenge syntaks.

15
00:00:46,660 --> 00:00:50,360
>> Webbrowsere dog er en smule mere
tilgivende når det kommer til HTML.

16
00:00:50,360 --> 00:00:53,860
Selv hvis din HTML er ikke syntaktisk
korrekt, kan din side stadig være

17
00:00:53,860 --> 00:00:57,150
vises af en browser, men det kan
ikke ser ud, som du havde tænkt dig.

18
00:00:57,150 --> 00:00:59,640
Så det er altid bedst at
følger reglerne.

19
00:00:59,640 --> 00:01:01,990
Den bedste måde at få en intuition
om, hvordan tingene arbejde er at

20
00:01:01,990 --> 00:01:03,300
gå gennem et eksempel.

21
00:01:03,300 --> 00:01:07,360
>> Så hvad vi har her er en grundlæggende
blueprint for en webside.

22
00:01:07,360 --> 00:01:10,690
Du har sikkert lagt mærke til en masse ting
mellem vinklede parenteser.

23
00:01:10,690 --> 00:01:12,900
Nå, de er bare tags.

24
00:01:12,900 --> 00:01:15,810
Tags dybest set informere webbrowsere
at, hey, noget

25
00:01:15,810 --> 00:01:17,150
kommer din vej.

26
00:01:17,150 --> 00:01:20,770
Husk dog, når du åbner en
tag, skal du lukke den, når du er

27
00:01:20,770 --> 00:01:21,750
færdig med at bruge det.

28
00:01:21,750 --> 00:01:24,690
>> Så for eksempel, jeg åbner en sektion
kode med åben

29
00:01:24,690 --> 00:01:26,960
beslag organ tæt beslag.

30
00:01:26,960 --> 00:01:31,280
Jeg derefter tilføje noget tekst, i dette tilfælde, min
første webside så når jeg gik til

31
00:01:31,280 --> 00:01:35,540
afslutning på dette afsnit, jeg bruger næsten en
identiske tag undtagen denne gang med en

32
00:01:35,540 --> 00:01:37,660
skråstreg fremad før kroppen.

33
00:01:37,660 --> 00:01:41,140
I almindelighed, er dette format, du er
kommer til at bruge, når du åbner

34
00:01:41,140 --> 00:01:42,680
og lukning tags.

35
00:01:42,680 --> 00:01:47,900
Tilsammen en åben tag og en slutkode
komponere, hvad der kaldes et element.

36
00:01:47,900 --> 00:01:51,870
>> Hvis man ser på den første linje, vil du
se et udråbstegn efterfulgt af

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

38
00:01:53,350 --> 00:01:56,280
Dette er egentlig bare at fortælle din browser
at filen er en webside

39
00:01:56,280 --> 00:01:58,280
skrevet i HTML.

40
00:01:58,280 --> 00:02:01,970
HTML-tag hovedsagelig siger,
her kommer nogle HTML.

41
00:02:01,970 --> 00:02:04,950
Så har vi et hoved tag med
en titel-tag inde i det.

42
00:02:04,950 --> 00:02:09,430
Hovedet tag, du kan tænke på som
bestående af HTML-kode, der kommer til

43
00:02:09,430 --> 00:02:12,670
hovedparten af ​​din webside s
faktiske indhold.

44
00:02:12,670 --> 00:02:16,700
>> I almindelighed, du sætte titlen på din
webside her, selvom der er nogle

45
00:02:16,700 --> 00:02:19,350
andre mærker, der kan vises
her så godt.

46
00:02:19,350 --> 00:02:25,020
Dernæst kommer din webside krop, den
faktiske kød og knogler af din hjemmeside.

47
00:02:25,020 --> 00:02:28,910
I vores eksempel har vi bare sætte en simpel
sætning, My First webside,

48
00:02:28,910 --> 00:02:34,100
som, hvis vi driver vores hjemmeside, vil se
lidt noget som dette.

49
00:02:34,100 --> 00:02:36,810
Vores webside er ikke for queer,
men fortvivl ikke.

50
00:02:36,810 --> 00:02:39,210
Vi fikse det op snart.

51
00:02:39,210 --> 00:02:44,070
>> Så ovennævnte HTML, vil vi give dig en meget
grundlæggende skabelon til en webside,

52
00:02:44,070 --> 00:02:46,310
ikke noget fancy, blot skelettet.

53
00:02:46,310 --> 00:02:49,160
Men hvis jeg oprette en webside,
hvad hvis jeg ønsker at tilføje en

54
00:02:49,160 --> 00:02:50,760
billede af, siger, mig selv?

55
00:02:50,760 --> 00:02:52,760
Tja, jeg kan gøre det.

56
00:02:52,760 --> 00:02:55,460
Der er et par måder at
tilføje billeder til dit websted.

57
00:02:55,460 --> 00:02:59,780
Hvis billedet er i samme mappe som
din HTML-fil, kan du linke til den

58
00:02:59,780 --> 00:03:01,950
billedet via sti som dette.

59
00:03:01,950 --> 00:03:05,910
>> Du åbner op med et billede tag fulgt
ved i Alt attribut i

60
00:03:05,910 --> 00:03:07,240
kilde af billedet.

61
00:03:07,240 --> 00:03:12,030
Alt attribut værdi er blot nogle
alternativ tekst i tilfælde en bruger ikke kan

62
00:03:12,030 --> 00:03:13,580
se billedet.

63
00:03:13,580 --> 00:03:19,680
Alternativt kan du også linke til
billeder via en fuld URL, som denne.

64
00:03:19,680 --> 00:03:24,180
Nu betyder, at hjemmesiden ikke eksisterer i virkeligheden,
men hvis der var et billede af

65
00:03:24,180 --> 00:03:27,760
mig på denne adresse, kunne jeg bruge
kilde URL til at omfatte

66
00:03:27,760 --> 00:03:29,930
sit image på min hjemmeside.

67
00:03:29,930 --> 00:03:35,590
Uanset hvad, du ender op med en meget
smukkere hjemmeside, noget som dette.

68
00:03:35,590 --> 00:03:39,730
>> Nå, det er temmelig cool, men jeg slags
af ønsker lidt tekst her.

69
00:03:39,730 --> 00:03:43,020
Så lad os bare tilføje noget
super enkel over

70
00:03:43,020 --> 00:03:45,210
billede, ligesom overskriften.

71
00:03:45,210 --> 00:03:50,830
Alt, hvad jeg har gjort hidtil, er at bruge header
tag, H1, og et linjeskift tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag gør skrifttypen lidt
smule større og mere fremtrædende.

73
00:03:54,900 --> 00:03:58,930
Den linjeskift tag, på den anden side
hånd, er slags cool.

74
00:03:58,930 --> 00:04:03,720
I modsætning til de fleste andre koder, behøver du ikke
en åbning og lukning pause tag, bare

75
00:04:03,720 --> 00:04:05,120
der er vist ovenfor.

76
00:04:05,120 --> 00:04:10,420
Dette skyldes brud har intet indhold
og er derfor et tomt element.

77
00:04:10,420 --> 00:04:14,940
>> Tomme elementer som dette, kan du åbne
og tæt samtidigt blot ved

78
00:04:14,940 --> 00:04:20,420
herunder en skråstreg på
udgangen af ​​den første erklæring.

79
00:04:20,420 --> 00:04:24,390
Så nu er min hjemmeside ser lidt
noget som dette.

80
00:04:24,390 --> 00:04:27,410
Bedre, men den slags føles
som en blindgyde.

81
00:04:27,410 --> 00:04:30,850
Der er ingen andre steder at gå bort
fra denne hoved side.

82
00:04:30,850 --> 00:04:33,075
Nå, lad os ordne det ved
herunder et link.

83
00:04:33,075 --> 00:04:36,860
>> Hvad jeg har tænkt mig at gøre her, er at bruge en
attribut betegnet A og gøre

84
00:04:36,860 --> 00:04:40,780
billede et link til, lad os sige, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
På den måde, når nogen klikker på mig,
deres browser vil blive dirigeret til

86
00:04:44,460 --> 00:04:47,810
en anden, sandsynligvis mere
nyttigt, webside.

87
00:04:47,810 --> 00:04:51,040
Jeg har haft til at minimere størrelsen af
tekst en smule, fordi vores webside er

88
00:04:51,040 --> 00:04:52,470
bliver mere avancerede.

89
00:04:52,470 --> 00:04:54,590
Men forhåbentlig er det stadig klart.

90
00:04:54,590 --> 00:04:59,460
Min hjemmeside ser nøjagtig det samme kun
Nu, når jeg klikker på billedet,

91
00:04:59,460 --> 00:05:04,410
min browser vil åbne op en anden
fanen for CS50.tv webside.

92
00:05:04,410 --> 00:05:08,970
>> Endelig, lad os sige, at jeg har tænkt mig at stil
denne hjemmeside senere ved hjælp af CSS.

93
00:05:08,970 --> 00:05:11,730
CSS er, hvad der er kendt som en
cascading style sheet.

94
00:05:11,730 --> 00:05:15,230
Og det dybest set giver en effektiv
måde at redigere og stil

95
00:05:15,230 --> 00:05:16,910
lignende blokke af kode.

96
00:05:16,910 --> 00:05:21,290
Jeg ønsker at begynde at organisere min HTML til
gøre det lettere at style senere.

97
00:05:21,290 --> 00:05:26,900
Her har jeg oprettet to forskellige slags
identifikatorer for at organisere min kode.

98
00:05:26,900 --> 00:05:31,170
Jeg har brugt id attribut inde i en
division, eller div tag, og jeg har brugt en

99
00:05:31,170 --> 00:05:34,120
Class attribut inde
en anden div tag.

100
00:05:34,120 --> 00:05:37,190
>> Id og class attributter
fungerer på samme måde.

101
00:05:37,190 --> 00:05:41,210
Den eneste forskel er, at du kan kun have
et element, den specifikke id, men

102
00:05:41,210 --> 00:05:43,600
vilkårligt antal elementer
kan dele en klasse.

103
00:05:43,600 --> 00:05:47,690
Altså for eksempel, kan jeg bruge klassen
billede flere gange, men jeg kan ikke

104
00:05:47,690 --> 00:05:50,533
oprette en anden division
med ID toppen.

105
00:05:50,533 --> 00:05:54,750
Selvom jeg ikke har gået ind i CSS,
et andet sprog almindeligvis anvendes

106
00:05:54,750 --> 00:05:59,700
sammen med HTML, når jeg starter styling
min kode med CSS, kan jeg bruge disse

107
00:05:59,700 --> 00:06:03,730
organisatoriske attributter til indflydelse
min webside æstetik.

108
00:06:03,730 --> 00:06:07,600
>> Alt i divisionen top
vil have lignende styling eller enhver

109
00:06:07,600 --> 00:06:12,010
anden gruppe af HTML I gruppe i
klasse billede vil dele et lignende udseende.

110
00:06:12,010 --> 00:06:15,700
Dette er meget nemmere end at forsøge at redigere
og stil billeder eller blokke af

111
00:06:15,700 --> 00:06:17,690
tekst individuelt.

112
00:06:17,690 --> 00:06:21,480
>> Så vi gik over det grundlæggende i, hvordan
at lave en webside med HTML.

113
00:06:21,480 --> 00:06:25,280
HTML har en masse andre funktioner også
at når parret med andre sprog

114
00:06:25,280 --> 00:06:29,220
ligesom CSS og JavaScript, kan virkelig
lave sider skiller sig ud.

115
00:06:29,220 --> 00:06:32,960
Den bedste måde at blive fortrolig med
HTML er bare at rode rundt med det,

116
00:06:32,960 --> 00:06:35,120
se, hvad der virker, og hvad der ikke gør.

117
00:06:35,120 --> 00:06:36,570
>> Mit navn er Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Dette er CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Altså for eksempel, kan jeg bruge
klassen billedet -

121
00:06:45,690 --> 00:06:48,028
Nej, der er så mange egenskaber.

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

123
00:06:52,500 --> 00:06:53,950
Mit navn er Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Dette er CS 650.

125
00:06:58,560 --> 00:06:59,810
Jeg ønsker at sige CSS.

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

127
00:07:02,325 --> 00:07:03,575
Det er CSS.

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