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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Täna ma lähen
rääkida natuke HTML,

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

4
00:00:12,330 --> 00:00:14,450
Näete HTML kõikjal nendel päevadel.

5
00:00:14,450 --> 00:00:17,190
Tegelikult, kui sa vaatad seda
video brauseris, sa oled

6
00:00:17,190 --> 00:00:19,120
nägemine HTML kohe.

7
00:00:19,120 --> 00:00:22,760
HTML ei ole programmeerimise keel,
pigem on see kasutatav märgistuskeel

8
00:00:22,760 --> 00:00:25,460
veebibrauserite muuta lehekülgi
Internetis.

9
00:00:25,460 --> 00:00:30,410
>> Nii võite küsida, kuidas täpselt on kirjalikult
veebilehe HTML erinev

10
00:00:30,410 --> 00:00:33,574
kirjutamise programmi programmeerimine
keel nagu C?

11
00:00:33,574 --> 00:00:38,010
Noh, C on keel väga ranged
süntaktilised reeglid, mis peab olema

12
00:00:38,010 --> 00:00:39,880
koostatud enne seda saab.

13
00:00:39,880 --> 00:00:43,070
Kui olete kunagi unustanud lisada
semikoolon lõpus avalduse

14
00:00:43,070 --> 00:00:46,660
oma C-koodi, sa tead, mida ma räägin
kohta on seoses range süntaks.

15
00:00:46,660 --> 00:00:50,360
>> Veebibrauserite kuigi on natuke rohkem
andke andeks, kui tegemist on HTML.

16
00:00:50,360 --> 00:00:53,860
Isegi kui teie HTML ei ole süntaktiliselt
õige, oma lehele võib veel

17
00:00:53,860 --> 00:00:57,150
kuvatakse brauseri, kuid see võib
ei vaata, nagu soovite.

18
00:00:57,150 --> 00:00:59,640
Nii et see on alati parima, et
järgima reegleid.

19
00:00:59,640 --> 00:01:01,990
Parim viis saada intuitsiooni
kuidas asjad töötavad on

20
00:01:01,990 --> 00:01:03,300
läbida näiteks.

21
00:01:03,300 --> 00:01:07,360
>> Nii, mis meil siin on põhiline
plaan veebilehele.

22
00:01:07,360 --> 00:01:10,690
Sa ilmselt märganud palju asju
vahel noolsulge.

23
00:01:10,690 --> 00:01:12,900
Noh, need on vaid sildid.

24
00:01:12,900 --> 00:01:15,810
Sildid põhimõtteliselt teavitama brausereid
et, hei, midagi

25
00:01:15,810 --> 00:01:17,150
tuleb sinu õuele.

26
00:01:17,150 --> 00:01:20,770
Pidage meeles, kui avate
tag, siis tuleb sulgeda, kui olete

27
00:01:20,770 --> 00:01:21,750
teha seda kasutada.

28
00:01:21,750 --> 00:01:24,690
>> Nii näiteks, kui avan jagu
koodi avatud

29
00:01:24,690 --> 00:01:26,960
toendit, sulg.

30
00:01:26,960 --> 00:01:31,280
Ma siis lisada mõned teksti, antud juhul minu
esimene veebileht, siis kui ma läksin

31
00:01:31,280 --> 00:01:35,540
sulgege see lõik, ma kasutan peaaegu
identne tag välja seekord

32
00:01:35,540 --> 00:01:37,660
kaldkriips enne keha.

33
00:01:37,660 --> 00:01:41,140
Üldiselt on see formaat oled
kavatse kasutada, kui avate

34
00:01:41,140 --> 00:01:42,680
ja sulgemise sildid.

35
00:01:42,680 --> 00:01:47,900
Koos avatud tag ja end tag
kirjutada, mida nimetatakse element.

36
00:01:47,900 --> 00:01:51,870
>> Kui te vaatate esimest rida, siis saad
vaata hüüumärk, millele järgneb

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

38
00:01:53,350 --> 00:01:56,280
See on tõesti lihtsalt ütlen oma brauseri
et fail on veebileht

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

40
00:01:58,280 --> 00:02:01,970
HTML tag sisuliselt ütleb,
siin on mõned HTML.

41
00:02:01,970 --> 00:02:04,950
Siis on meil head tag
title tag sees.

42
00:02:04,950 --> 00:02:09,430
Pea tag sa ei mõtle nagu
sisaldab HTML koodi, mis tuleb võtta

43
00:02:09,430 --> 00:02:12,670
suurema osa oma veebilehe
tegelik sisu.

44
00:02:12,670 --> 00:02:16,700
>> Üldiselt paned pealkiri oma
veebilehele siin, kuigi on ka mõned

45
00:02:16,700 --> 00:02:19,350
muud tunnused, mis võivad ilmneda
ka siin.

46
00:02:19,350 --> 00:02:25,020
Seejärel tuleb oma veebilehe keha
tegelik liha ja kondid oma veebilehel.

47
00:02:25,020 --> 00:02:28,910
Meie näites, oleme lihtsalt panna lihtne
lause, minu esimene veebileht,

48
00:02:28,910 --> 00:02:34,100
mis, kui me käivitada meie saidi näeb
natuke midagi sellist.

49
00:02:34,100 --> 00:02:36,810
Meie veebileht ei ole liiga veider
kuid ärge muretsege.

50
00:02:36,810 --> 00:02:39,210
Me kuusk see üles kiiresti.

51
00:02:39,210 --> 00:02:44,070
>> Nii eespool HTML, me anname teile väga
põhi malli veebilehe

52
00:02:44,070 --> 00:02:46,310
Nothing fancy, lihtsalt tühi luud.

53
00:02:46,310 --> 00:02:49,160
Aga kui ma loon veebilehe
Mis siis, kui ma tahan lisada

54
00:02:49,160 --> 00:02:50,760
pilt, ütleme, ise?

55
00:02:50,760 --> 00:02:52,760
Noh, ma ei saa seda teha.

56
00:02:52,760 --> 00:02:55,460
Seal on paar võimalust, et
lisada pilte saidile.

57
00:02:55,460 --> 00:02:59,780
Kui pilt on samas kaustas
HTML-faili, mida saab siduda

58
00:02:59,780 --> 00:03:01,950
image via tee niimoodi.

59
00:03:01,950 --> 00:03:05,910
>> Sa avada koos image tag järgneb
poolt Alt atribuut

60
00:03:05,910 --> 00:03:07,240
allikas pilt.

61
00:03:07,240 --> 00:03:12,030
Alt atribuut väärtus on vaid mõned
alternatiivse teksti kui kasutaja ei saa

62
00:03:12,030 --> 00:03:13,580
vaata pilti.

63
00:03:13,580 --> 00:03:19,680
Alternatiivina võite ka link
piltide kaudu täielik URL, nagu see.

64
00:03:19,680 --> 00:03:24,180
Nüüd, et veebileht ei ole tegelikult olemas,
aga kui oleks pilt

65
00:03:24,180 --> 00:03:27,760
mind sellele aadressile, mida ma kasutan
allikas URL lisada

66
00:03:27,760 --> 00:03:29,930
selle pildi oma veebilehel.

67
00:03:29,930 --> 00:03:35,590
Mõlemal juhul, sa lõpuks koos palju
ilusam veebilehel, midagi sellist.

68
00:03:35,590 --> 00:03:39,730
>> Noh, see on päris lahe, aga ma lahke
kohta soovite mingi tekst ka siin.

69
00:03:39,730 --> 00:03:43,020
Teeme lihtsalt midagi lisada
super lihtne üle

70
00:03:43,020 --> 00:03:45,210
pilt, nagu päises.

71
00:03:45,210 --> 00:03:50,830
Kõik, mida ma olen teinud siiani kasutada päises
tag, H1 ja reavahetuse tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag muudab font vähe
natuke suurem ja silmatorkavam.

73
00:03:54,900 --> 00:03:58,930
Line break tag teiselt
Samas on selline lahe.

74
00:03:58,930 --> 00:04:03,720
Erinevalt enamikust teistest sildid, et sa ei pea
avamise ja sulgemise break tag, just

75
00:04:03,720 --> 00:04:05,120
üks eespool näidatud.

76
00:04:05,120 --> 00:04:10,420
Seda seetõttu, et break puudub sisu
ning on seetõttu tühi element.

77
00:04:10,420 --> 00:04:14,940
>> Tühjad elemendid nagu seda saab avada
Lähedale samaaegselt lihtsalt

78
00:04:14,940 --> 00:04:20,420
sealhulgas kaldkriips kell
Esialgse avalduse.

79
00:04:20,420 --> 00:04:24,390
Nüüd minu kodulehel paistab pisut
midagi sellist.

80
00:04:24,390 --> 00:04:27,410
Parem, kuid see omamoodi tunne
nagu tupikusse.

81
00:04:27,410 --> 00:04:30,850
Seal on kuhugi minna kõrvale
selle esilehele.

82
00:04:30,850 --> 00:04:33,075
Noh, määrata, et
sealhulgas link.

83
00:04:33,075 --> 00:04:36,860
>> Mida ma teen siin kasutada
omistada tähistatakse ja teha

84
00:04:36,860 --> 00:04:40,780
image link, ütleme, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Nii kui keegi klikib mind
oma brauseri suunatakse

86
00:04:44,460 --> 00:04:47,810
teine, ilmselt rohkem
kasulik, veebilehele.

87
00:04:47,810 --> 00:04:51,040
Mulle minimeerida suurus
teksti natuke, sest meie kodulehel on

88
00:04:51,040 --> 00:04:52,470
üha rohkem arenenud.

89
00:04:52,470 --> 00:04:54,590
Aga loodetavasti see on ikka selge.

90
00:04:54,590 --> 00:04:59,460
Minu veebileht välja täpselt sama ainult
Nüüd, kui ma klõpsa pildil,

91
00:04:59,460 --> 00:05:04,410
minu brauser avab teise
sakk CS50.tv veebilehele.

92
00:05:04,410 --> 00:05:08,970
>> Lõpuks oletame ma lähen stiil
sellel veebilehel kasutades CSS.

93
00:05:08,970 --> 00:05:11,730
CSS on nn
CSS-stiil.

94
00:05:11,730 --> 00:05:15,230
Ja põhimõtteliselt annab tõhusa
kuidas muuta ja stiil

95
00:05:15,230 --> 00:05:16,910
sarnane plokid koodi.

96
00:05:16,910 --> 00:05:21,290
Tahan hakata korraldama oma HTML
lihtsam stiili hiljem.

97
00:05:21,290 --> 00:05:26,900
Siin ma loodud kaks erinevat
tunnused, mis aitavad korraldada oma koodi.

98
00:05:26,900 --> 00:05:31,170
Olen kasutanud ID atribuudi sees
jagunemise või div tag ja olen kasutanud

99
00:05:31,170 --> 00:05:34,120
Class'i sees
teine ​​div tag.

100
00:05:34,120 --> 00:05:37,190
>> ID-klassi atribuudid
töötavad sarnaselt.

101
00:05:37,190 --> 00:05:41,210
Ainus erinevus on, saab olla ainult
üks element, konkreetsed ID, kuid

102
00:05:41,210 --> 00:05:43,600
tahes elementide arvu
jagada klassi.

103
00:05:43,600 --> 00:05:47,690
Nii näiteks, ma saan kasutada klassi
pildi mitu korda, aga ma ei saa

104
00:05:47,690 --> 00:05:50,533
luua teise divisjoni
ID-top.

105
00:05:50,533 --> 00:05:54,750
Kuigi ma ei ole läinud CSS,
teine ​​keel levinumaid

106
00:05:54,750 --> 00:05:59,700
koos HTML, kui ma hakkan stiil
minu koodi CSS, ma ei kasuta neid

107
00:05:59,700 --> 00:06:03,730
organisatsioonilisi aspekte, et mõju
minu veebilehe esteetika.

108
00:06:03,730 --> 00:06:07,600
>> Kõik rajoonis top
on sarnane stylings või

109
00:06:07,600 --> 00:06:12,010
Teine osa HTML I rühm arvesse
klassi pilt jagavad sarnast välimust.

110
00:06:12,010 --> 00:06:15,700
See on palju lihtsam kui üritad muuta
ja stiili pilte või plokid

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

112
00:06:17,690 --> 00:06:21,480
>> Nii me läksime üle põhitõdesid
teha veebilehe HTML.

113
00:06:21,480 --> 00:06:25,280
HTML on hunnik muid funktsioone ka
et kui need on ühendatud teiste keelte

114
00:06:25,280 --> 00:06:29,220
nagu CSS ja JavaScript, võib tõesti
teha lehti välja paistma.

115
00:06:29,220 --> 00:06:32,960
Parim viis saada rahul
HTML on lihtsalt jändama see,

116
00:06:32,960 --> 00:06:35,120
näha, mis toimib ja mis mitte.

117
00:06:35,120 --> 00:06:36,570
>> Minu nimi on Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
See on CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Nii näiteks, ma ei saa kasutada
klassi pilt -

121
00:06:45,690 --> 00:06:48,028
Ei, seal on nii palju atribuute.

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

123
00:06:52,500 --> 00:06:53,950
Minu nimi on Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
See on CS 650.

125
00:06:58,560 --> 00:06:59,810
Ma tahan öelda, CSS.

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

127
00:07:02,325 --> 00:07:03,575
See on CSS.

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