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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Sot, unë jam duke shkuar për
të flasim pak për HTML,

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

4
00:00:12,330 --> 00:00:14,450
Ju shikoni HTML kudo këto ditë.

5
00:00:14,450 --> 00:00:17,190
Në fakt, në qoftë se ju jeni të shikuar këtë
Video në një shfletues, ju jeni

6
00:00:17,190 --> 00:00:19,120
duke parë HTML tani.

7
00:00:19,120 --> 00:00:22,760
HTML nuk është një gjuhë programimi,
më tepër, kjo është një gjuhë markup përdorur nga

8
00:00:22,760 --> 00:00:25,460
shfletues web që të merr faqet
në internet.

9
00:00:25,460 --> 00:00:30,410
>> Kështu që ju mund të pyesni, se si saktësisht po shkruan
një faqe web në HTML ndryshme

10
00:00:30,410 --> 00:00:33,574
nga të shkruarit e një programi në një programimit
Gjuha si C?

11
00:00:33,574 --> 00:00:38,010
E pra, C është një gjuhë me shumë të rreptë
Rregullat sintaksore që ka nevojë të jetë i

12
00:00:38,010 --> 00:00:39,880
përpiluar para se të mund të kandidojë.

13
00:00:39,880 --> 00:00:43,070
Nëse e keni harruar ndonjëherë për të përfshirë një
pikëpresje në fund të një deklaratës në

14
00:00:43,070 --> 00:00:46,660
Kodi juaj C, ju e dini se çfarë jam duke folur
rreth në lidhje me sintaksë të rreptë.

15
00:00:46,660 --> 00:00:50,360
>> Web browsers edhe pse, janë pak më të
fal kur vjen puna për të HTML.

16
00:00:50,360 --> 00:00:53,860
Edhe në qoftë se HTML juaj nuk është syntactically
saktë, faqja e juaj mund të jetë ende

17
00:00:53,860 --> 00:00:57,150
shfaqet nga një shfletues, por ajo mund
nuk e shikoni si ju qëllim.

18
00:00:57,150 --> 00:00:59,640
Kështu që është gjithmonë mirë për të
ndjekin rregullat.

19
00:00:59,640 --> 00:01:01,990
Mënyra më e mirë për të marrë një intuitë
për mënyrën se si gjërat e punës është që të

20
00:01:01,990 --> 00:01:03,300
kalojnë nëpër një shembull.

21
00:01:03,300 --> 00:01:07,360
>> Pra, ajo që ne kemi këtu është një bazë
Projekti për një faqe web.

22
00:01:07,360 --> 00:01:10,690
Ju ndoshta vënë re shumë gjëra
në mes të kllapa angled.

23
00:01:10,690 --> 00:01:12,900
E pra, ata janë vetëm tags.

24
00:01:12,900 --> 00:01:15,810
Tags thelb informojë shfletues web
që, hej, diçka

25
00:01:15,810 --> 00:01:17,150
po vijnë në rrugën tuaj.

26
00:01:17,150 --> 00:01:20,770
Mos harroni edhe pse, sa herë që ju të hapur një
tag, ju keni nevojë për të mbyllur një herë ju jeni të

27
00:01:20,770 --> 00:01:21,750
bërë duke e përdorur atë.

28
00:01:21,750 --> 00:01:24,690
>> Kështu për shembull, unë të hapur një seksion
e kodit të hapur me

29
00:01:24,690 --> 00:01:26,960
Trupi kllapa, kllapa të ngushtë.

30
00:01:26,960 --> 00:01:31,280
Unë pastaj shtoni një tekst, në këtë rast, my
Faqja web e parë atëherë kur unë shkova në

31
00:01:31,280 --> 00:01:35,540
mbyllur këtë seksion, ta përdor pothuajse një
tag identike me përjashtim të kësaj kohe me një

32
00:01:35,540 --> 00:01:37,660
përpara çaj para trupit.

33
00:01:37,660 --> 00:01:41,140
Në përgjithësi, kjo është format që ju jeni
do të përdorin sa herë që ju jeni të hapur

34
00:01:41,140 --> 00:01:42,680
dhe mbylljes tags.

35
00:01:42,680 --> 00:01:47,900
Së bashku, një tag të hapur dhe një tag fund
kompozoj atë që quhet një element.

36
00:01:47,900 --> 00:01:51,870
>> Nëse ju shikoni në rreshtin e parë, ju do të
shohim një pikë thirrje ndjekur nga

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

38
00:01:53,350 --> 00:01:56,280
Kjo është me të vërtetë vetëm duke u thënë të shfletuesit tuaj
që fotografia është një faqe web

39
00:01:56,280 --> 00:01:58,280
shkruar në HTML.

40
00:01:58,280 --> 00:02:01,970
HTML tag në thelb thotë,
këtu vjen disa HTML.

41
00:02:01,970 --> 00:02:04,950
Pastaj ne kemi një tag kokë me
një tag titullin brenda tij.

42
00:02:04,950 --> 00:02:09,430
Kreu tag ju mund të mendoni si
që përmban Kodi HTML që vjen për

43
00:02:09,430 --> 00:02:12,670
pjesa më e madhe e web faqja e juaj
Përmbajtja aktuale.

44
00:02:12,670 --> 00:02:16,700
>> Në përgjithësi, ju vendosni titullin e juaj
web faqja e këtu, edhe pse ka disa

45
00:02:16,700 --> 00:02:19,350
tags tjera që mund të shfaqen
si edhe këtu.

46
00:02:19,350 --> 00:02:25,020
Next vjen trupi faqen tuaj të internetit-së,
mish aktuale dhe kockat e faqen tuaj te internetit.

47
00:02:25,020 --> 00:02:28,910
Në shembullin tonë, ne kemi vënë vetëm një e thjeshtë
fjali, Webpage im i parë,

48
00:02:28,910 --> 00:02:34,100
të cilat, në qoftë se ne të drejtuar faqen tonë, do të duket
një diçka të vogël si kjo.

49
00:02:34,100 --> 00:02:36,810
Faqja jonë e internetit nuk është shumë më merren mendtë,
por mos u bëni merak.

50
00:02:36,810 --> 00:02:39,210
Ne do të bredh atë së shpejti.

51
00:02:39,210 --> 00:02:44,070
>> Pra HTML sipër, ne do të ju jap një shumë të
template themelore për një faqe web,

52
00:02:44,070 --> 00:02:46,310
zbukuruar asgjë, vetëm kockat zhveshur.

53
00:02:46,310 --> 00:02:49,160
Por në qoftë se unë jam duke krijuar një faqe web,
çfarë nëse unë dua të shtoj një

54
00:02:49,160 --> 00:02:50,760
foto e, të themi, veten time?

55
00:02:50,760 --> 00:02:52,760
E pra, unë mund ta bëjë këtë.

56
00:02:52,760 --> 00:02:55,460
Ka disa mënyra për të
shtoni imazhe në faqen tuaj.

57
00:02:55,460 --> 00:02:59,780
Nëse imazhi është në të njëjtën dosje si
dosja juaj HTML, ju mund të lidhura me

58
00:02:59,780 --> 00:03:01,950
image nëpërmjet rrugë si kjo.

59
00:03:01,950 --> 00:03:05,910
>> Ju hapur me një etiketë imazh ndjekur
nga në atribut Alt në

60
00:03:05,910 --> 00:03:07,240
burimi i imazhit.

61
00:03:07,240 --> 00:03:12,030
Vlera e atribut alt-së është vetëm disa
Teksti alternative në rast se një përdorues nuk mund të

62
00:03:12,030 --> 00:03:13,580
shohin imazhin.

63
00:03:13,580 --> 00:03:19,680
Përndryshe, ju gjithashtu mund të lidhura me
imazhe nëpërmjet një URL të plotë, e pëlqejnë këtë.

64
00:03:19,680 --> 00:03:24,180
Tani, se faqja nuk ekziston më të vërtetë,
por nëse do të kishte një foto të

65
00:03:24,180 --> 00:03:27,760
mua në atë adresë, unë mund të përdorni
URL burim për të përfshirë

66
00:03:27,760 --> 00:03:29,930
imazhi i saj në web faqen time.

67
00:03:29,930 --> 00:03:35,590
Ose mënyrë, ju përfundojnë me një shumë më të
website prettier, diçka si kjo.

68
00:03:35,590 --> 00:03:39,730
>> E pra, kjo është shumë i ftohtë, por unë lloj
i duan disa tekst si edhe këtu.

69
00:03:39,730 --> 00:03:43,020
Pra, le të vetëm të shtoni diçka
super e thjeshtë më lartë

70
00:03:43,020 --> 00:03:45,210
image, si kokë.

71
00:03:45,210 --> 00:03:50,830
Të gjitha i kam bërë deri më tani është përdorni header
tag, H1, dhe një pushim linjë tag, br.

72
00:03:50,830 --> 00:03:54,900
Header tag bën font pak
pak më e madhe dhe më të shquar.

73
00:03:54,900 --> 00:03:58,930
Tag pushim linjë, në anën tjetër
dore, është lloj i ftohtë.

74
00:03:58,930 --> 00:04:03,720
Ndryshe nga shumica e etiketave të tjera, ju nuk keni
një hapje dhe pushim mbylljes tag, vetëm

75
00:04:03,720 --> 00:04:05,120
e treguar më lart.

76
00:04:05,120 --> 00:04:10,420
Kjo është për shkak pushim nuk ka përmbajtje
dhe për këtë arsye është, një element bosh.

77
00:04:10,420 --> 00:04:14,940
>> Elemente bosh si kjo, ju mund të hapur
dhe në afërsi të njëjtën kohë thjesht duke

78
00:04:14,940 --> 00:04:20,420
duke përfshirë edhe një plagë përpara në
fundi i deklaratës fillestare.

79
00:04:20,420 --> 00:04:24,390
Deri tani faqen time duket pak
diçka e tillë.

80
00:04:24,390 --> 00:04:27,410
Më mirë, por ajo lloj ndihet
si një qorrsokak.

81
00:04:27,410 --> 00:04:30,850
Nuk ka asnjë vend tjetër për të shkuar mënjanë
nga kjo faqe kryesore.

82
00:04:30,850 --> 00:04:33,075
E pra, le të rregullojmë se nga
duke përfshirë një lidhje.

83
00:04:33,075 --> 00:04:36,860
>> Ajo që unë jam duke shkuar për të bërë këtu është të përdorni një
atribut shënohet me A dhe të bëjë

84
00:04:36,860 --> 00:04:40,780
image një lidhje me, le të themi, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Në këtë mënyrë, sa herë që dikush klikimeve në mua,
shfletuesi i tyre do të drejtohen për të

86
00:04:44,460 --> 00:04:47,810
një tjetër, ndoshta më shumë
dobishme, web faqe.

87
00:04:47,810 --> 00:04:51,040
Unë kam pasur për të minimizuar madhësinë e
tekst pak sepse faqja tonë të internetit është

88
00:04:51,040 --> 00:04:52,470
duke marrë më të avancuar.

89
00:04:52,470 --> 00:04:54,590
Por shpresojmë se, është ende e qartë.

90
00:04:54,590 --> 00:04:59,460
Website im është i njëjtë vetëm
tani, sa herë që unë klikoni në foto,

91
00:04:59,460 --> 00:05:04,410
Shfletuesi im do të hapë një tjetër
tab për web faqen CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Së fundi, le të thonë se unë jam duke shkuar për stilin
ky website më vonë duke përdorur CSS.

93
00:05:08,970 --> 00:05:11,730
CSS është ajo që është e njohur si një
fletë Cascading style.

94
00:05:11,730 --> 00:05:15,230
Dhe kjo në thelb jep një efikas
mënyrë për të redaktuar dhe stil

95
00:05:15,230 --> 00:05:16,910
blloqe të ngjashme të kodit.

96
00:05:16,910 --> 00:05:21,290
Unë dua të fillojë organizimin HTML time në
bëjë më të lehtë për të stilit më vonë.

97
00:05:21,290 --> 00:05:26,900
Këtu, kam ngritur dy lloje të ndryshme të
identifikues të ndihmuar të organizojnë kodin tim.

98
00:05:26,900 --> 00:05:31,170
Unë e kam përdorur atributi ID brenda një
ndarje, ose tag div, dhe unë e kam përdorur një

99
00:05:31,170 --> 00:05:34,120
Klasa atribut brenda
një tjetër tag div.

100
00:05:34,120 --> 00:05:37,190
>> ID dhe Klasa atributet
punojnë në mënyrë të ngjashme.

101
00:05:37,190 --> 00:05:41,210
Dallimi i vetëm është se ju mund të ketë vetëm
një element, ID specifike, por

102
00:05:41,210 --> 00:05:43,600
çdo numër të elementeve
mund të ndajnë një klasë.

103
00:05:43,600 --> 00:05:47,690
Kështu për shembull, unë mund të përdorni të klasës
image herë të shumta, por unë nuk mund të

104
00:05:47,690 --> 00:05:50,533
krijuar një tjetër ndarje
me ID lartë.

105
00:05:50,533 --> 00:05:54,750
Edhe pse unë nuk kanë shkuar në CSS,
një tjetër gjuha e përdorur zakonisht

106
00:05:54,750 --> 00:05:59,700
së bashku me HTML, një herë unë të fillojë styling
kodi im me CSS, unë mund të përdorni këto

107
00:05:59,700 --> 00:06:03,730
atribute organizative të ndikimit
estetikë web faqen time-së.

108
00:06:03,730 --> 00:06:07,600
>> Çdo gjë brenda ndarjes krye
do të ketë stylings të ngjashme ose ndonjë

109
00:06:07,600 --> 00:06:12,010
Grupi tjetër i HTML grupit I në
image klasë do të ndajnë një vështrim të ngjashme.

110
00:06:12,010 --> 00:06:15,700
Kjo është shumë më e lehtë se sa duke u përpjekur për të redaktuar
dhe imazhe stil apo blloqe të

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

112
00:06:17,690 --> 00:06:21,480
>> Pra, kemi shkuar mbi bazat e se si
për të bërë një web faqe me HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ka një bandë e karakteristika të tjera shumë
se kur çiftëzohet me gjuhë të tjera

114
00:06:25,280 --> 00:06:29,220
si CSS dhe JavaScript, mund të vërtetë
të bëjë faqet dal.

115
00:06:29,220 --> 00:06:32,960
Mënyra më e mirë për të marrë të kënaqur me
HTML është vetëm për të bela rreth me të,

116
00:06:32,960 --> 00:06:35,120
të parë se çfarë punon, dhe çfarë jo.

117
00:06:35,120 --> 00:06:36,570
>> Emri im është Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Kjo është CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Kështu për shembull, unë mund të përdorni
image klasë -

121
00:06:45,690 --> 00:06:48,028
Jo, ka shumë atribute.

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

123
00:06:52,500 --> 00:06:53,950
Emri im është Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Kjo është CS 650.

125
00:06:58,560 --> 00:06:59,810
Unë dua të them CSS.

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

127
00:07:02,325 --> 00:07:03,575
Kjo është CSS.

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