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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: I dag, jeg kommer til å
snakke litt 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 dager.

5
00:00:14,450 --> 00:00:17,190
Faktisk, hvis du ser dette
video i en nettleser, er du

6
00:00:17,190 --> 00:00:19,120
se HTML akkurat nå.

7
00:00:19,120 --> 00:00:22,760
HTML er ikke et programmeringsspråk,
snarere er det et kodespråk som brukes av

8
00:00:22,760 --> 00:00:25,460
nettlesere å gjengi sider
på internett.

9
00:00:25,460 --> 00:00:30,410
>> Så du kan spørre, hvordan er egentlig å skrive
en web-side i HTML annerledes

10
00:00:30,410 --> 00:00:33,574
fra å skrive et program i et programmerings
språk som C?

11
00:00:33,574 --> 00:00:38,010
Vel, er C et språk med svært strenge
syntaktiske regler som må være

12
00:00:38,010 --> 00:00:39,880
kompilert før den kan kjøre.

13
00:00:39,880 --> 00:00:43,070
Hvis du noen gang har glemt å inkludere en
semikolon ved enden av en uttalelse

14
00:00:43,070 --> 00:00:46,660
C-kode, vet du hva jeg snakker
om i forhold til streng syntaks.

15
00:00:46,660 --> 00:00:50,360
>> Nettlesere skjønt, er litt mer
tilgivende når det kommer til HTML.

16
00:00:50,360 --> 00:00:53,860
Selv om HTML er ikke syntaktisk
korrekt, kan siden din fortsatt være

17
00:00:53,860 --> 00:00:57,150
vises av en nettleser, men det kan
ikke se ut som du hadde tenkt.

18
00:00:57,150 --> 00:00:59,640
Så det er alltid best å
følge reglene.

19
00:00:59,640 --> 00:01:01,990
Den beste måten å få en intuisjon
om hvordan ting fungerer er å

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

21
00:01:03,300 --> 00:01:07,360
>> Så det vi har her er en grunnleggende
blåkopi for en web-side.

22
00:01:07,360 --> 00:01:10,690
Du har sannsynligvis lagt merke til en del ting
i mellom vinklede parentes.

23
00:01:10,690 --> 00:01:12,900
Vel, de er bare koder.

24
00:01:12,900 --> 00:01:15,810
Tags utgangspunktet informere nettlesere
at, hei, noe

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

26
00:01:17,150 --> 00:01:20,770
Husk skjønt, når du åpner en
tag, må du lukke den når du er

27
00:01:20,770 --> 00:01:21,750
gjøres ved hjelp av den.

28
00:01:21,750 --> 00:01:24,690
>> Så for eksempel, åpner jeg en seksjon
av koden med åpen

29
00:01:24,690 --> 00:01:26,960
brakett kroppen, tett brakett.

30
00:01:26,960 --> 00:01:31,280
Jeg deretter legge litt tekst, i dette tilfellet, min
første web side så når jeg gikk til

31
00:01:31,280 --> 00:01:35,540
lukke denne delen, bruker jeg nesten en
identiske tag bortsett fra denne gangen med en

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

33
00:01:37,660 --> 00:01:41,140
Generelt, er dette formatet du er
kommer til å bruke når du åpner

34
00:01:41,140 --> 00:01:42,680
og lukking koder.

35
00:01:42,680 --> 00:01:47,900
Sammen, en åpen tag og en slutt tag
komponere det som kalles et element.

36
00:01:47,900 --> 00:01:51,870
>> Hvis du ser på den første linjen, vil du
se et utropstegn etterfulgt av

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

38
00:01:53,350 --> 00:01:56,280
Dette er egentlig bare å fortelle nettleseren din
at filen er en web-side

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

40
00:01:58,280 --> 00:02:01,970
HTML-kode i hovedsak sier,
her kommer noen HTML.

41
00:02:01,970 --> 00:02:04,950
Da har vi et hode tag med
en tittel tag inni den.

42
00:02:04,950 --> 00:02:09,430
Hodet tag du kan tenke på som
bestående av HTML-kode som kommer for

43
00:02:09,430 --> 00:02:12,670
mesteparten av nettsidens
faktiske innhold.

44
00:02:12,670 --> 00:02:16,700
>> Generelt, sette deg tittelen på
web-side her, selv om det er noen

45
00:02:16,700 --> 00:02:19,350
andre koder som kan vises
her også.

46
00:02:19,350 --> 00:02:25,020
Neste kommer nettsiden din kropp, det
faktiske kjøtt og bein på ditt nettsted.

47
00:02:25,020 --> 00:02:28,910
I vårt eksempel har vi bare sette en enkel
setning, My First webside,

48
00:02:28,910 --> 00:02:34,100
som, hvis vi kjører vår side, vil se
litt noe sånt som dette.

49
00:02:34,100 --> 00:02:36,810
Vår nettside er ikke så rart,
men ikke bekymre deg.

50
00:02:36,810 --> 00:02:39,210
Vi vil gran det opp snart.

51
00:02:39,210 --> 00:02:44,070
>> Så ovenfor HTML, vil vi gi deg en veldig
grunnleggende mal for en web-side,

52
00:02:44,070 --> 00:02:46,310
ikke noe fancy, bare den nakne bein.

53
00:02:46,310 --> 00:02:49,160
Men hvis jeg oppretter en nettside,
hva om jeg ønsker å legge til et

54
00:02:49,160 --> 00:02:50,760
bilde av, si, meg selv?

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

56
00:02:52,760 --> 00:02:55,460
Det er et par måter å
legge til bilder til nettstedet ditt.

57
00:02:55,460 --> 00:02:59,780
Hvis bildet er i samme mappe som
HTML-filen, kan du koble til

58
00:02:59,780 --> 00:03:01,950
image via stien slik.

59
00:03:01,950 --> 00:03:05,910
>> Du åpner opp med en bildekode fulgt
etter i Alt attributt i

60
00:03:05,910 --> 00:03:07,240
kilde av bildet.

61
00:03:07,240 --> 00:03:12,030
Alt attributt verdi er bare noen
alternativ tekst i tilfelle en bruker kan ikke

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

63
00:03:13,580 --> 00:03:19,680
Alternativt, kan du også koble til
bilder via en full URL, som dette.

64
00:03:19,680 --> 00:03:24,180
Nå betyr at nettstedet ikke egentlig eksisterer,
men hvis det var et bilde av

65
00:03:24,180 --> 00:03:27,760
meg på denne adressen, jeg kunne bruke
kildeadressen for å inkludere

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

67
00:03:29,930 --> 00:03:35,590
Uansett, ender du opp med en mye
penere nettside, noe som dette.

68
00:03:35,590 --> 00:03:39,730
>> Vel, det er ganske kult, men jeg slags
av ønsker litt tekst her også.

69
00:03:39,730 --> 00:03:43,020
Så la oss bare legge til noe
super enkelt over

70
00:03:43,020 --> 00:03:45,210
bilde, som overskriften.

71
00:03:45,210 --> 00:03:50,830
Alt jeg har gjort så langt er å bruke overskriften
tag, H1, og et linjeskift tag, br.

72
00:03:50,830 --> 00:03:54,900
Overskriften koden gjør skriften litt
litt større og mer fremtredende.

73
00:03:54,900 --> 00:03:58,930
Linjen signal, på den annen
hånd, er litt kult.

74
00:03:58,930 --> 00:04:03,720
I motsetning til de fleste andre koder, trenger du ikke
en åpning og lukking pause tag, bare

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

76
00:04:05,120 --> 00:04:10,420
Dette skyldes at brudd ikke har noen innholds
og er derfor et tomt element.

77
00:04:10,420 --> 00:04:14,940
>> Tomme elementer som dette, kan du åpne
og tett samtidig bare ved

78
00:04:14,940 --> 00:04:20,420
inkludert en skråstrek på
slutten av den første erklæringen.

79
00:04:20,420 --> 00:04:24,390
Så nå er min hjemmeside ser litt
noe sånt som dette.

80
00:04:24,390 --> 00:04:27,410
Bedre, men det føles litt
som en blindvei.

81
00:04:27,410 --> 00:04:30,850
Det er ingen andre steder å gå til side
fra denne hovedsiden.

82
00:04:30,850 --> 00:04:33,075
Vel, la oss fikse det ved
inkludert en kobling.

83
00:04:33,075 --> 00:04:36,860
>> Hva jeg skal gjøre her er å bruke en
attributt betegnes av en og gjøre

84
00:04:36,860 --> 00:04:40,780
image en link til, la oss si, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
På den måten, når noen klikker på meg,
nettleseren vil bli rettet mot

86
00:04:44,460 --> 00:04:47,810
en annen, sannsynligvis mer
nyttig, web-side.

87
00:04:47,810 --> 00:04:51,040
Jeg har hatt for å minimere størrelsen på
tekst litt fordi vår nettside er

88
00:04:51,040 --> 00:04:52,470
blir mer avanserte.

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

90
00:04:54,590 --> 00:04:59,460
Min hjemmeside ser nøyaktig det samme bare
Nå, når jeg klikker på bildet,

91
00:04:59,460 --> 00:05:04,410
Nettleseren min vil åpne opp en annen
kategorien for CS50.tv nettside.

92
00:05:04,410 --> 00:05:08,970
>> Til slutt, la oss si at jeg kommer til stil
denne nettsiden senere ved hjelp av CSS.

93
00:05:08,970 --> 00:05:11,730
CSS er det som er kjent som en
gripende stilark.

94
00:05:11,730 --> 00:05:15,230
Og det gir i utgangspunktet en effektiv
måte å redigere og stil

95
00:05:15,230 --> 00:05:16,910
lignende blokker av kode.

96
00:05:16,910 --> 00:05:21,290
Jeg ønsker å begynne å organisere min HTML til
gjøre det enklere å style senere.

97
00:05:21,290 --> 00:05:26,900
Her setter jeg opp to forskjellige typer
identifikatorer for å bidra til å organisere koden min.

98
00:05:26,900 --> 00:05:31,170
Jeg har brukt ID-attributtet inne i en
divisjon, eller div tag, og jeg har brukt en

99
00:05:31,170 --> 00:05:34,120
Klasse attributt inne
en annen div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID og Class attributter
fungerer på samme måte.

101
00:05:37,190 --> 00:05:41,210
Den eneste forskjellen er at du kan bare ha
ene element, den spesifikke ID, men

102
00:05:41,210 --> 00:05:43,600
hvilket som helst antall elementer
kan dele en klasse.

103
00:05:43,600 --> 00:05:47,690
Så for eksempel, kan jeg bruke klassen
bilde flere ganger, men jeg kan ikke

104
00:05:47,690 --> 00:05:50,533
opprette en ny divisjon
med ID toppen.

105
00:05:50,533 --> 00:05:54,750
Selv om jeg ikke har gått inn i CSS,
et annet språk som vanligvis brukes

106
00:05:54,750 --> 00:05:59,700
sammen med HTML, når jeg begynner styling
koden min med CSS, kan jeg bruke disse

107
00:05:59,700 --> 00:06:03,730
organisatoriske egenskaper til innflytelse
siden min web estetikk.

108
00:06:03,730 --> 00:06:07,600
>> Alt innen divisjonen toppen
vil ha lignende stylings eller noen

109
00:06:07,600 --> 00:06:12,010
andre gruppen av HTML I gruppen inn i
klasse bildet vil dele en lignende utseende.

110
00:06:12,010 --> 00:06:15,700
Dette er mye enklere enn å prøve å redigere
og stil bilder eller blokker av

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

112
00:06:17,690 --> 00:06:21,480
>> Så gikk vi over det grunnleggende om hvordan
å lage en nettside med HTML.

113
00:06:21,480 --> 00:06:25,280
HTML har en haug med andre funksjoner også
som da sammen med andre språk

114
00:06:25,280 --> 00:06:29,220
som CSS og Javascript, kan virkelig
gjøre sidene skiller seg ut.

115
00:06:29,220 --> 00:06:32,960
Den beste måten å bli komfortabel med
HTML er bare å rote rundt med det,

116
00:06:32,960 --> 00:06:35,120
se hva som fungerer, og hva som ikke virker.

117
00:06:35,120 --> 00:06:36,570
>> Mitt 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
>> Så for eksempel, kan jeg bruke
klassebildet -

121
00:06:45,690 --> 00:06:48,028
Nei, det er så mange attributter.

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

123
00:06:52,500 --> 00:06:53,950
Mitt 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 å si CSS.

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

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

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