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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Vandag, ek gaan
praat 'n bietjie oor HTML,

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

4
00:00:12,330 --> 00:00:14,450
Jy sien HTML oral deesdae.

5
00:00:14,450 --> 00:00:17,190
In werklikheid, as jy hierdie is kyk
video in 'n leser, is jy

6
00:00:17,190 --> 00:00:19,120
sien HTML nou.

7
00:00:19,120 --> 00:00:22,760
HTML is nie 'n programmeertaal,
Inteendeel, dit is 'n opmaak taal

8
00:00:22,760 --> 00:00:25,460
webblaaiers bladsye te lewer
op die internet.

9
00:00:25,460 --> 00:00:30,410
>> So jy kan vra, hoe presies skryf
'n webblad in HTML verskillende

10
00:00:30,410 --> 00:00:33,574
van die skryf van 'n program in 'n programmeertaal
taal soos C?

11
00:00:33,574 --> 00:00:38,010
Wel, C is 'n taal met 'n baie streng
sintaktiese reëls wat moet wees

12
00:00:38,010 --> 00:00:39,880
saamgestel word voordat dit kan hardloop.

13
00:00:39,880 --> 00:00:43,070
As jy al ooit vergeet om 'n sluit
kommapunt aan die einde van 'n verklaring in

14
00:00:43,070 --> 00:00:46,660
jou C-kode, jy weet wat ek praat
oor met betrekking tot 'n streng sintaks.

15
00:00:46,660 --> 00:00:50,360
>> Webblaaiers al is, is 'n bietjie meer
vergewe wanneer dit kom by HTML.

16
00:00:50,360 --> 00:00:53,860
Selfs as jou HTML is nie sintakties
korrek, jou bladsy kan nog steeds

17
00:00:53,860 --> 00:00:57,150
vertoon deur 'n leser, maar dit kan
as jy bedoel nie kyk nie.

18
00:00:57,150 --> 00:00:59,640
Dus is dit altyd die beste om
volg die reëls.

19
00:00:59,640 --> 00:01:01,990
Die beste manier om 'n aanvoeling te kry
oor hoe dinge werk is om te

20
00:01:01,990 --> 00:01:03,300
gaan deur 'n voorbeeld.

21
00:01:03,300 --> 00:01:07,360
>> So wat ons hier het is 'n basiese
bloudruk vir 'n web bladsy.

22
00:01:07,360 --> 00:01:10,690
Jy het waarskynlik opgemerk 'n baie van die dinge wat
tussen skuins hakies.

23
00:01:10,690 --> 00:01:12,900
Wel, dit is net tags.

24
00:01:12,900 --> 00:01:15,810
Tags basies inlig webblaaiers
dat hey, iets

25
00:01:15,810 --> 00:01:17,150
jou pad kom.

26
00:01:17,150 --> 00:01:20,770
Onthou egter, wanneer jy maak 'n
tag, moet jy dit te sluit wanneer jy

27
00:01:20,770 --> 00:01:21,750
gedoen om dit te gebruik.

28
00:01:21,750 --> 00:01:24,690
>> So byvoorbeeld, het ek 'n artikel oop
van die kode met 'n oop

29
00:01:24,690 --> 00:01:26,960
bracket liggaam, naby bracket.

30
00:01:26,960 --> 00:01:31,280
Ek voeg dan 'n paar teks, in hierdie geval, my
eerste webblad dan wanneer ek na

31
00:01:31,280 --> 00:01:35,540
sluit hierdie afdeling, ek gebruik amper 'n
identiese tag behalwe hierdie keer met 'n

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

33
00:01:37,660 --> 00:01:41,140
In die algemeen, is dit die formaat is jy
gaan gebruik wanneer jy die opening

34
00:01:41,140 --> 00:01:42,680
en die sluiting van etikette.

35
00:01:42,680 --> 00:01:47,900
Saam, 'n oop tag en 'n einde tag
komponeer wat genoem 'n element.

36
00:01:47,900 --> 00:01:51,870
>> As jy kyk na die eerste reël, sal jy
sien 'n uitroepteken, gevolg deur

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

38
00:01:53,350 --> 00:01:56,280
Dit is regtig net vertel jou leser
dat die lêer is 'n web bladsy

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

40
00:01:58,280 --> 00:02:01,970
Die HTML tag sê in wese,
hier kom 'n paar HTML.

41
00:02:01,970 --> 00:02:04,950
Dan het ons 'n kop tag met
'n titel tag daarin.

42
00:02:04,950 --> 00:02:09,430
Die hoof tag wat jy kan dink as
bestaande HTML-kode wat kom vir

43
00:02:09,430 --> 00:02:12,670
die grootste deel van jou webblad se
werklike inhoud.

44
00:02:12,670 --> 00:02:16,700
>> In die algemeen, jy het die titel van jou
webblad hier, maar daar is 'n paar

45
00:02:16,700 --> 00:02:19,350
ander etikette wat kan verskyn
hier so goed.

46
00:02:19,350 --> 00:02:25,020
Volgende kom jou webblad se liggaam, die
werklike vleis en bene van jou webwerf.

47
00:02:25,020 --> 00:02:28,910
In ons voorbeeld, ons het net 'n eenvoudige
vonnis, was my eerste webblad

48
00:02:28,910 --> 00:02:34,100
wat, as ons loop ons webwerf, sal kyk
'n bietjie iets soos hierdie.

49
00:02:34,100 --> 00:02:36,810
Ons webblad is nie te queer,
maar moenie bekommerd wees nie.

50
00:02:36,810 --> 00:02:39,210
Ons sal kikker dit gou.

51
00:02:39,210 --> 00:02:44,070
>> So die bogenoemde HTML, sal ons gee jou 'n baie
basiese patroon vir 'n webblad,

52
00:02:44,070 --> 00:02:46,310
niks fancy nie, net die kaal bene.

53
00:02:46,310 --> 00:02:49,160
Maar as ek die skep van 'n webblad,
Wat as ek wil 'n by te voeg

54
00:02:49,160 --> 00:02:50,760
prentjie van, sê, myself?

55
00:02:50,760 --> 00:02:52,760
Wel, ek kan dit doen.

56
00:02:52,760 --> 00:02:55,460
Daar is 'n paar maniere om te
beeld by te voeg jou site.

57
00:02:55,460 --> 00:02:59,780
As die beeld is in dieselfde gids as
jou HTML-lêer, kan jy 'n skakel na die

58
00:02:59,780 --> 00:03:01,950
Beeld via pad soos hierdie.

59
00:03:01,950 --> 00:03:05,910
>> Jy maak met 'n beeld tag gevolg
deur in atributen in die

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

61
00:03:07,240 --> 00:03:12,030
Die atributen se waarde is net 'n paar
alternatiewe teks in die geval van 'n gebruiker kan nie

62
00:03:12,030 --> 00:03:13,580
sien die beeld.

63
00:03:13,580 --> 00:03:19,680
Alternatiewelik, kan jy ook 'n skakel na
beelde via 'n volle URL, soos hierdie.

64
00:03:19,680 --> 00:03:24,180
Nou, beteken dat die webwerf nie werklik bestaan ​​nie,
maar as daar was 'n foto van

65
00:03:24,180 --> 00:03:27,760
my by die adres, kan ek gebruik
die bron URL in te sluit

66
00:03:27,760 --> 00:03:29,930
sy beeld op my webwerf.

67
00:03:29,930 --> 00:03:35,590
Óf weg, jy eindig met 'n baie
mooier webwerf, iets soos hierdie.

68
00:03:35,590 --> 00:03:39,730
>> Wel, dit is pretty cool, maar ek soort
wil 'n paar van die teks hier.

69
00:03:39,730 --> 00:03:43,020
So laat ons net iets byvoeg
super eenvoudige bo die

70
00:03:43,020 --> 00:03:45,210
beeld, soos die kop.

71
00:03:45,210 --> 00:03:50,830
Al wat ek tot dusver gedoen het, is gebruik om die kop
tag, H1, en 'n lyn breek tag, br.

72
00:03:50,830 --> 00:03:54,900
Die kop tag maak die skrif 'n bietjie
bietjie groter en meer prominent.

73
00:03:54,900 --> 00:03:58,930
Die lyn breek tag, aan die ander kant
hand, is gaaf.

74
00:03:58,930 --> 00:04:03,720
Anders as die meeste ander etikette, jy hoef nie
'n opening en sluiting break tag, net

75
00:04:03,720 --> 00:04:05,120
die een hierbo.

76
00:04:05,120 --> 00:04:10,420
Dit is omdat break het geen inhoud
en is dus 'n leë element.

77
00:04:10,420 --> 00:04:14,940
>> Leë elemente soos hierdie, kan jy maak
en sluit gelyktydig deur eenvoudig

78
00:04:14,940 --> 00:04:20,420
insluitend 'n slash aan die
einde van die aanvanklike verklaring.

79
00:04:20,420 --> 00:04:24,390
So nou my website lyk 'n bietjie
iets soos hierdie.

80
00:04:24,390 --> 00:04:27,410
Beter, maar dit soort van voel
soos 'n doodloopstraat.

81
00:04:27,410 --> 00:04:30,850
Daar is nêrens anders ter syde te gaan
In die hoof bladsy.

82
00:04:30,850 --> 00:04:33,075
Wel, laat ons dit regmaak deur
insluitend 'n skakel.

83
00:04:33,075 --> 00:04:36,860
>> Wat gaan ek hier doen, is gebruik om 'n
kenmerk aangedui deur A en maak die

84
00:04:36,860 --> 00:04:40,780
beeld 'n skakel na, kom ons sê, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Op dié manier, wanneer iemand druk op my,
hul leser sal gerig word aan

86
00:04:44,460 --> 00:04:47,810
'n ander, waarskynlik meer
nuttige, web bladsy.

87
00:04:47,810 --> 00:04:51,040
Ek het die grootte van die minimum te beperk
teks 'n bietjie, want ons webblad is

88
00:04:51,040 --> 00:04:52,470
om meer gevorderde.

89
00:04:52,470 --> 00:04:54,590
Maar hopelik, dit is nog steeds duidelik.

90
00:04:54,590 --> 00:04:59,460
My webwerf lyk presies dieselfde net
nou, wanneer ek kliek op die foto,

91
00:04:59,460 --> 00:05:04,410
my leser sal oopmaak 'n ander
blad vir die CS50.tv webblad.

92
00:05:04,410 --> 00:05:08,970
>> Laastens, kom ons sê ek gaan styl
hierdie webwerf later met behulp van CSS.

93
00:05:08,970 --> 00:05:11,730
CSS is wat bekend staan ​​as 'n
Cascading Style sheet.

94
00:05:11,730 --> 00:05:15,230
En dit basies is 'n doeltreffende
manier om te wysig en styl

95
00:05:15,230 --> 00:05:16,910
soortgelyke blokke van die kode.

96
00:05:16,910 --> 00:05:21,290
Ek wil om te begin organiseer my HTML te
Maak dit makliker om later op stileer.

97
00:05:21,290 --> 00:05:26,900
Hier, ek stel twee verskillende soorte
identifiseerders te help om my kode organiseer.

98
00:05:26,900 --> 00:05:31,170
Ek het gebruik om die ID eienskap in 'n
afdeling, of div tag, en ek het gebruik om 'n

99
00:05:31,170 --> 00:05:34,120
Klas kenmerk binne
'n ander div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID en Klas eienskappe
Net so werk.

101
00:05:37,190 --> 00:05:41,210
Die enigste verskil is dat jy kan net
een element van die spesifieke ID, maar

102
00:05:41,210 --> 00:05:43,600
enige aantal elemente
kan 'n klas deel.

103
00:05:43,600 --> 00:05:47,690
So byvoorbeeld, kan ek die klas gebruik
beeld verskeie kere, maar ek kan nie

104
00:05:47,690 --> 00:05:50,533
'n ander afdeling te skep
met die ID top.

105
00:05:50,533 --> 00:05:54,750
Alhoewel ek nie gegaan het nie in CSS,
'n ander taal wat algemeen gebruik word

106
00:05:54,750 --> 00:05:59,700
saam met HTML, nadat ek begin stilering
my kode met CSS, kan ek hierdie gebruik

107
00:05:59,700 --> 00:06:03,730
organisatoriese kenmerke invloed
my webblad se estetika.

108
00:06:03,730 --> 00:06:07,600
>> Alles binne die afdeling top
sal soortgelyke stylings of enige het

109
00:06:07,600 --> 00:06:12,010
ander groep HTML Ek groep in die
klas beeld sal deel 'n soortgelyke voorkoms.

110
00:06:12,010 --> 00:06:15,700
Dit is baie makliker as om te probeer om te wysig
en styl beelde of blokke

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

112
00:06:17,690 --> 00:06:21,480
>> So het ons oor die basiese beginsels van hoe
'n webblad te maak met HTML.

113
00:06:21,480 --> 00:06:25,280
HTML het 'n klomp van die ander funksies te
dat wanneer dit saam met ander tale

114
00:06:25,280 --> 00:06:29,220
soos CSS en JavaScript, kan regtig
maak bladsye uit te staan.

115
00:06:29,220 --> 00:06:32,960
Die beste manier om gemaklik met te kry
HTML is net om gemors rond met dit,

116
00:06:32,960 --> 00:06:35,120
sien wat werk en wat nie werk nie.

117
00:06:35,120 --> 00:06:36,570
>> My 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
>> So byvoorbeeld, kan ek gebruik
die klas beeld -

121
00:06:45,690 --> 00:06:48,028
Nee, daar is so baie eienskappe.

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

123
00:06:52,500 --> 00:06:53,950
My 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
Ek wil CSS te sê.

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