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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Vandaag ga ik
praten een beetje over HTML,

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

4
00:00:12,330 --> 00:00:14,450
Je ziet HTML overal deze dagen.

5
00:00:14,450 --> 00:00:17,190
In feite, als je dit ziet
video in een browser, je bent

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

7
00:00:19,120 --> 00:00:22,760
HTML is geen programmeertaal,
Integendeel, het is een opmaaktaal die wordt gebruikt door

8
00:00:22,760 --> 00:00:25,460
webbrowsers om pagina's te maken
op het internet.

9
00:00:25,460 --> 00:00:30,410
>> Dus je zou kunnen vragen, hoe precies is het schrijven
een webpagina in HTML verschillende

10
00:00:30,410 --> 00:00:33,574
het schrijven van een programma in een programmeertaal
taal zoals C?

11
00:00:33,574 --> 00:00:38,010
Nou, C is een taal met een zeer strikte
syntactische regels die moet worden

12
00:00:38,010 --> 00:00:39,880
gecompileerd voordat het kan draaien.

13
00:00:39,880 --> 00:00:43,070
Als je ooit bent vergeten om een ​​onder
puntkomma aan het einde van een verklaring

14
00:00:43,070 --> 00:00:46,660
uw C-code, je weet wat ik bedoel
over met betrekking tot strikte syntax.

15
00:00:46,660 --> 00:00:50,360
>> Webbrowsers zijn echter een beetje meer
vergevingsgezind als het gaat om HTML.

16
00:00:50,360 --> 00:00:53,860
Zelfs als uw HTML is niet syntactisch
correct, kan uw pagina nog steeds

17
00:00:53,860 --> 00:00:57,150
weergegeven door een browser, maar het kan
niet kijken zoals u dat wilt.

18
00:00:57,150 --> 00:00:59,640
Dus het is altijd het beste om
volg de regels.

19
00:00:59,640 --> 00:01:01,990
De beste manier om een ​​intuïtie te krijgen
over hoe de dingen werken is om

20
00:01:01,990 --> 00:01:03,300
gaan door een voorbeeld.

21
00:01:03,300 --> 00:01:07,360
>> Dus wat we hier hebben is een basis
blauwdruk voor een webpagina.

22
00:01:07,360 --> 00:01:10,690
Je hebt waarschijnlijk een heleboel dingen
tussen haakjes.

23
00:01:10,690 --> 00:01:12,900
Nou, die zijn gewoon tags.

24
00:01:12,900 --> 00:01:15,810
Tags principe webbrowsers informeren
dat, hey, iets

25
00:01:15,810 --> 00:01:17,150
wordt op je afkomt.

26
00:01:17,150 --> 00:01:20,770
Vergeet echter niet, wanneer u opent een
tag, moet je om te sluiten als je eenmaal bent

27
00:01:20,770 --> 00:01:21,750
gedaan gebruiken.

28
00:01:21,750 --> 00:01:24,690
>> Dus ik bijvoorbeeld een sectie te openen
code met open

29
00:01:24,690 --> 00:01:26,960
steunhuis, haakje sluiten.

30
00:01:26,960 --> 00:01:31,280
Voeg ik dan wat tekst, in dit geval, mijn
eerste webpagina toen ik ging naar

31
00:01:31,280 --> 00:01:35,540
Sluit dit gedeelte gebruik ik bijna een
identieke tag behalve deze keer met een

32
00:01:35,540 --> 00:01:37,660
slash voor lichaam.

33
00:01:37,660 --> 00:01:41,140
In het algemeen, dit is het formaat dat u bent
gaat gebruiken wanneer u opent

34
00:01:41,140 --> 00:01:42,680
en sluiten van tags.

35
00:01:42,680 --> 00:01:47,900
Samen, een open-tag en een eind-tag
componeren wat een element genoemd.

36
00:01:47,900 --> 00:01:51,870
>> Als je kijkt naar de eerste lijn, zult u
zie een uitroepteken gevolgd door

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

38
00:01:53,350 --> 00:01:56,280
Dit is eigenlijk gewoon het vertellen van uw browser
dat het bestand is een webpagina

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

40
00:01:58,280 --> 00:02:01,970
De HTML-tag zegt in wezen,
hier komt een aantal HTML.

41
00:02:01,970 --> 00:02:04,950
Dan hebben we een hoofd-tag met
een titel tag erin.

42
00:02:04,950 --> 00:02:09,430
De hoofd-tag die je kunt bedenken als
bestaande uit HTML-code die wordt geleverd voor

43
00:02:09,430 --> 00:02:12,670
het grootste deel van uw webpagina's
eigenlijke inhoud.

44
00:02:12,670 --> 00:02:16,700
>> In het algemeen zet je de titel van je
webpagina hier, hoewel er enkele

45
00:02:16,700 --> 00:02:19,350
andere tags die kunnen worden weergegeven
hier ook.

46
00:02:19,350 --> 00:02:25,020
Daarna komt uw webpagina's lichaam, de
werkelijke vlees en botten van uw website.

47
00:02:25,020 --> 00:02:28,910
In ons voorbeeld hebben we net een eenvoudige
zin, Mijn eerste webpagina,

48
00:02:28,910 --> 00:02:34,100
die, als we onze site draaien, zal kijken
een beetje zoiets als dit.

49
00:02:34,100 --> 00:02:36,810
Onze webpagina is niet al te vreemd,
maar maak je geen zorgen.

50
00:02:36,810 --> 00:02:39,210
We zullen het sparren binnenkort.

51
00:02:39,210 --> 00:02:44,070
>> Zodat de bovenstaande HTML, geven we u een zeer geven
basic sjabloon voor een webpagina,

52
00:02:44,070 --> 00:02:46,310
niets bijzonders, alleen de kale botten.

53
00:02:46,310 --> 00:02:49,160
Maar als ik ben het creëren van een webpagina,
wat als ik wil een toevoegen

54
00:02:49,160 --> 00:02:50,760
beeld van, zeg, mezelf?

55
00:02:50,760 --> 00:02:52,760
Nou, ik kan dat doen.

56
00:02:52,760 --> 00:02:55,460
Er zijn een paar manieren om
afbeeldingen toe te voegen aan uw site.

57
00:02:55,460 --> 00:02:59,780
Als de afbeelding in dezelfde map als
uw HTML-bestand, kunt u een link naar de

58
00:02:59,780 --> 00:03:01,950
afbeelding via dergelijke route.

59
00:03:01,950 --> 00:03:05,910
>> U opent met een afbeelding tag gevolgd
door in Alt attribuut in de

60
00:03:05,910 --> 00:03:07,240
bron van het beeld.

61
00:03:07,240 --> 00:03:12,030
Waarde van de Alt-attribuut is slechts enkele
alternatieve tekst in het geval dat een gebruiker niet kan

62
00:03:12,030 --> 00:03:13,580
zie de afbeelding.

63
00:03:13,580 --> 00:03:19,680
Als alternatief kunt u ook koppelen aan
beelden via een volledige URL, zoals deze.

64
00:03:19,680 --> 00:03:24,180
Nu, betekent dat de website niet echt bestaat,
maar als er een foto van

65
00:03:24,180 --> 00:03:27,760
me op dat adres, kon ik gebruik
de bron URL behoren

66
00:03:27,760 --> 00:03:29,930
haar imago op mijn website.

67
00:03:29,930 --> 00:03:35,590
Hoe dan ook, eindig je met een veel
mooier website, iets als dit.

68
00:03:35,590 --> 00:03:39,730
>> Nou, dat is wel cool, maar ik soort
van willen wat tekst hier ook.

69
00:03:39,730 --> 00:03:43,020
Dus laten we gewoon iets toevoegen
super eenvoudig boven de

70
00:03:43,020 --> 00:03:45,210
beeld, net als de header.

71
00:03:45,210 --> 00:03:50,830
Alles wat ik tot nu toe heb gedaan, is gebruik maken van de header
tag, H1 en een regeleinde tag, br.

72
00:03:50,830 --> 00:03:54,900
De header-tag maakt het lettertype een beetje
beetje groter en meer op de voorgrond.

73
00:03:54,900 --> 00:03:58,930
Het regeleinde-tag, aan de andere
kant, is wel cool.

74
00:03:58,930 --> 00:04:03,720
In tegenstelling tot de meeste andere tags, hoef je niet
een opening en sluiting break-tag, net

75
00:04:03,720 --> 00:04:05,120
de hierboven.

76
00:04:05,120 --> 00:04:10,420
Dit komt omdat breuk heeft geen inhoud
en is daarom een ​​leeg element.

77
00:04:10,420 --> 00:04:14,940
>> Lege elementen zoals dit, kunt u openen
en dicht tegelijkertijd gewoon door

78
00:04:14,940 --> 00:04:20,420
inclusief een slash op het
einde van de eerste aangifte.

79
00:04:20,420 --> 00:04:24,390
Dus nu mijn website ziet er een beetje
iets als dit.

80
00:04:24,390 --> 00:04:27,410
Beter, maar het soort voelt
als een doodlopende weg.

81
00:04:27,410 --> 00:04:30,850
Er is nergens anders opzij te gaan
van deze hoofdpagina.

82
00:04:30,850 --> 00:04:33,075
Nou, laten we dat op te lossen door
inclusief een link.

83
00:04:33,075 --> 00:04:36,860
>> Wat ik ga doen, is gebruik maken van een
attribuut aangeduid met A en maak de

84
00:04:36,860 --> 00:04:40,780
afbeelding een link naar, laten we zeggen, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Op die manier, wanneer iemand klikt op mij,
hun browser wordt doorverwezen naar

86
00:04:44,460 --> 00:04:47,810
andere, waarschijnlijk meer
nuttig, webpagina.

87
00:04:47,810 --> 00:04:51,040
Ik heb gehad om de grootte van de te minimaliseren
tekst een beetje omdat onze webpagina is

88
00:04:51,040 --> 00:04:52,470
steeds meer geavanceerde.

89
00:04:52,470 --> 00:04:54,590
Maar hopelijk, het is nog steeds duidelijk.

90
00:04:54,590 --> 00:04:59,460
Mijn website ziet er precies hetzelfde alleen
nu, wanneer ik klik op de foto,

91
00:04:59,460 --> 00:05:04,410
mijn browser opent een ander
tabblad voor de webpagina CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Tot slot, laten we zeggen dat ik ga stijl
deze website later met behulp van CSS.

93
00:05:08,970 --> 00:05:11,730
CSS is wat bekend staat als een
cascading style sheet.

94
00:05:11,730 --> 00:05:15,230
En het principe biedt een efficiënte
manier te bewerken en stijl

95
00:05:15,230 --> 00:05:16,910
soortgelijke blokken code.

96
00:05:16,910 --> 00:05:21,290
Ik wil beginnen met het organiseren van mijn HTML naar
het gemakkelijker om stijl later.

97
00:05:21,290 --> 00:05:26,900
Hier richtte ik twee verschillende soorten
identifiers te helpen organiseren mijn code.

98
00:05:26,900 --> 00:05:31,170
Ik heb de ID-attribuut in een
divisie of div-tag, en ik heb gebruik gemaakt van een

99
00:05:31,170 --> 00:05:34,120
Class attribuut binnen
een andere div-tag.

100
00:05:34,120 --> 00:05:37,190
>> Id en class attributen
werken op vergelijkbare wijze.

101
00:05:37,190 --> 00:05:41,210
Het enige verschil is dat je kunt alleen
een element, het specifieke ID, maar

102
00:05:41,210 --> 00:05:43,600
elk aantal elementen
kan een klasse delen.

103
00:05:43,600 --> 00:05:47,690
Dus bijvoorbeeld, kan ik de klas te gebruiken
afbeelding meerdere keren, maar ik kan niet

104
00:05:47,690 --> 00:05:50,533
creëren een andere divisie
met de ID-top.

105
00:05:50,533 --> 00:05:54,750
Hoewel ik nog niet gegaan in CSS,
andere taal veelgebruikte

106
00:05:54,750 --> 00:05:59,700
naast HTML, zodra ik begin styling
mijn code met CSS, kan ik deze gebruiken

107
00:05:59,700 --> 00:06:03,730
organisatorische kenmerken die invloed
esthetiek van mijn webpagina's.

108
00:06:03,730 --> 00:06:07,600
>> Alles binnen de divisie top
zullen gelijkaardige stylings of hebben

109
00:06:07,600 --> 00:06:12,010
andere groep van HTML I groep in de
afbeelding klasse zal een gelijkaardige blik delen.

110
00:06:12,010 --> 00:06:15,700
Dit is veel gemakkelijker dan te proberen te bewerken
en stijl beelden of blokken

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

112
00:06:17,690 --> 00:06:21,480
>> Dus gingen we over de basisprincipes van hoe
naar een webpagina maken met HTML.

113
00:06:21,480 --> 00:06:25,280
HTML heeft een heleboel andere functies te
dat wanneer gecombineerd met andere talen

114
00:06:25,280 --> 00:06:29,220
zoals CSS en JavaScript, kan echt
maken pagina's opvallen.

115
00:06:29,220 --> 00:06:32,960
De beste manier om te wennen aan
HTML is gewoon om te prutsen met het,

116
00:06:32,960 --> 00:06:35,120
zien wat werkt en wat niet.

117
00:06:35,120 --> 00:06:36,570
>> Mijn naam is Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Dit is CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Dus bijvoorbeeld, kan ik gebruiken
het imago van de klas -

121
00:06:45,690 --> 00:06:48,028
Nee, er zijn zo veel attributen.

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

123
00:06:52,500 --> 00:06:53,950
Mijn naam is Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Dit is CS 650.

125
00:06:58,560 --> 00:06:59,810
Ik wil CSS zeggen.

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

127
00:07:02,325 --> 00:07:03,575
Dit is CSS.

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