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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Leo, mimi nina kwenda kwa
kuzungumza kidogo juu ya HTML,

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

4
00:00:12,330 --> 00:00:14,450
Unaweza kuona HTML kila mahali siku hizi.

5
00:00:14,450 --> 00:00:17,190
Kwa kweli, kama wewe ni kuangalia hii
video katika browser, wewe ni

6
00:00:17,190 --> 00:00:19,120
kuona HTML hivi sasa.

7
00:00:19,120 --> 00:00:22,760
HTML ni si lugha ya programu,
badala yake, ni lugha ghafi kutumiwa na

8
00:00:22,760 --> 00:00:25,460
browsers mtandao atatoa kurasa
kwenye mtandao.

9
00:00:25,460 --> 00:00:30,410
>> Basi unaweza kuuliza, jinsi gani hasa ni kuandika
ukurasa wa mtandao katika HTML mbalimbali

10
00:00:30,410 --> 00:00:33,574
kutoka kuandika mpango katika programu
lugha kama C?

11
00:00:33,574 --> 00:00:38,010
Naam, C ni lugha na kali sana
sheria syntactical kwamba mahitaji ya kuwa

12
00:00:38,010 --> 00:00:39,880
ulioandaliwa kabla ya kukimbia.

13
00:00:39,880 --> 00:00:43,070
Kama ve milele wamesahau ni pamoja na
semicolon mwishoni mwa taarifa katika

14
00:00:43,070 --> 00:00:46,660
C code yako, unajua nini mimi kuzungumza
kuhusu inayohusiana na syntax kali.

15
00:00:46,660 --> 00:00:50,360
>> Browsers mtandao ingawa, ni kidogo zaidi
kusamehe linapokuja suala la HTML.

16
00:00:50,360 --> 00:00:53,860
Hata kama HTML yako si syntactically
sahihi, ukurasa wako bado wanaweza kuwa

17
00:00:53,860 --> 00:00:57,150
kuonyeshwa na browser, lakini nguvu
si kuangalia kama wewe lengo.

18
00:00:57,150 --> 00:00:59,640
Hivyo ni daima bora ya
kufuata sheria.

19
00:00:59,640 --> 00:01:01,990
njia bora ya kupata Intuition
kuhusu jinsi mambo kazi ni kwa

20
00:01:01,990 --> 00:01:03,300
kwenda kwa njia ya mfano.

21
00:01:03,300 --> 00:01:07,360
>> Hivyo nini sisi hapa ni ya msingi
mwongozo kwa ukurasa wa mtandao.

22
00:01:07,360 --> 00:01:10,690
Pengine niliona mambo mengi
katika kati ya mabano angled.

23
00:01:10,690 --> 00:01:12,900
Naam, wale ni vitambulisho tu.

24
00:01:12,900 --> 00:01:15,810
Tags kimsingi kuwajulisha browsers mtandao
kwamba, hey, kitu

25
00:01:15,810 --> 00:01:17,150
ni kuja njia yako.

26
00:01:17,150 --> 00:01:20,770
Kumbuka ingawa, wakati wowote kufungua
tag, unahitaji kuifunga mara moja wewe ni

27
00:01:20,770 --> 00:01:21,750
kufanyika kwa kutumia yake.

28
00:01:21,750 --> 00:01:24,690
>> Hivyo kwa mfano, mimi wazi sehemu
ya maadili ya na wazi

29
00:01:24,690 --> 00:01:26,960
bracket mwili, bracket karibu.

30
00:01:26,960 --> 00:01:31,280
Mimi kisha kuongeza baadhi ya maandishi, katika kesi hii, yangu
kwanza katika ukurasa wa mtandao kisha wakati nilikwenda

31
00:01:31,280 --> 00:01:35,540
karibu sehemu hii, mimi kutumia karibu
tag kufanana isipokuwa wakati huu na

32
00:01:35,540 --> 00:01:37,660
mbele kufyeka kabla ya mwili.

33
00:01:37,660 --> 00:01:41,140
Kwa ujumla, hii ni format uko
kwenda kutumia wakati wewe ni kufungua

34
00:01:41,140 --> 00:01:42,680
na kufunga vitambulisho.

35
00:01:42,680 --> 00:01:47,900
Pamoja, tag wazi na tag mwisho
kutunga kile kinachoitwa hiki.

36
00:01:47,900 --> 00:01:51,870
>> Kama ukiangalia mstari wa kwanza, itabidi
kuona Moderators kumweka ikifuatiwa na

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

38
00:01:53,350 --> 00:01:56,280
Hii ni kweli kuwaambia tu ya browser yako
kwamba faili ni ukurasa wa mtandao

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

40
00:01:58,280 --> 00:02:01,970
Tag HTML kimsingi anasema,
inakuja baadhi HTML.

41
00:02:01,970 --> 00:02:04,950
Basi tuna tag kichwa na
cheo tag ndani yake.

42
00:02:04,950 --> 00:02:09,430
tag kichwa unaweza kufikiria kama
inahusu HTML code kwamba anakuja kwa

43
00:02:09,430 --> 00:02:12,670
wingi wa mtandao wako ukurasa wa
halisi maudhui.

44
00:02:12,670 --> 00:02:16,700
>> Kwa ujumla, kuweka jina la yako
mtandao ukurasa hapa, ingawa kuna baadhi ya

45
00:02:16,700 --> 00:02:19,350
tags nyingine ambayo inaweza kuonekana
hapa pia.

46
00:02:19,350 --> 00:02:25,020
Pili inakuja mwili ya mtandao ukurasa wako,
nyama halisi na mifupa ya tovuti yako.

47
00:02:25,020 --> 00:02:28,910
Katika mfano wetu, tumekuwa tu ya kuweka rahisi
hukumu, Webpage yangu ya kwanza,

48
00:02:28,910 --> 00:02:34,100
ambayo, kama sisi kukimbia tovuti yetu, kuangalia
kitu kidogo kama hii.

49
00:02:34,100 --> 00:02:36,810
Mtandao wetu ukurasa si pia queer,
lakini usijali.

50
00:02:36,810 --> 00:02:39,210
Tutaweza spruce it up hivi karibuni.

51
00:02:39,210 --> 00:02:44,070
>> Hivyo HTML hapo juu, sisi nitakupa sana
template msingi kwa ajili ya ukurasa wa mtandao,

52
00:02:44,070 --> 00:02:46,310
kitu dhana tu, tu mifupa tupu.

53
00:02:46,310 --> 00:02:49,160
Lakini kama mimi nina kujenga mtandao wa
nini kama mimi unataka kuongeza

54
00:02:49,160 --> 00:02:50,760
picha ya, kusema, mimi mwenyewe?

55
00:02:50,760 --> 00:02:52,760
Naam, siwezi kufanya hivyo.

56
00:02:52,760 --> 00:02:55,460
Kuna michache ya njia ya
kuongeza picha kwenye tovuti yako.

57
00:02:55,460 --> 00:02:59,780
Kama picha ni katika folder moja kama
HTML faili yako, unaweza zilizounganishwa na

58
00:02:59,780 --> 00:03:01,950
picha kupitia njia kama hii.

59
00:03:01,950 --> 00:03:05,910
>> Unaweza kufungua na tag picha ikifuatiwa
na katika Alt sifa katika

60
00:03:05,910 --> 00:03:07,240
chanzo cha picha.

61
00:03:07,240 --> 00:03:12,030
Thamani Alt sifa ni baadhi tu ya
Nakala mbadala katika kesi mtumiaji anaweza si

62
00:03:12,030 --> 00:03:13,580
kuona picha.

63
00:03:13,580 --> 00:03:19,680
Au, unaweza pia zilizounganishwa na
images kupitia URL full, kama hii.

64
00:03:19,680 --> 00:03:24,180
Sasa, tovuti ya kwamba si kweli zipo,
lakini kama kulikuwa na picha ya

65
00:03:24,180 --> 00:03:27,760
yangu katika anwani hiyo, mimi naweza kutumia
chanzo URL ni pamoja na

66
00:03:27,760 --> 00:03:29,930
sura yake kwenye tovuti yangu.

67
00:03:29,930 --> 00:03:35,590
Aidha njia, wewe kuishia na kiasi
prettier tovuti, kitu kama hiki.

68
00:03:35,590 --> 00:03:39,730
>> Naam, hiyo ni pretty baridi, lakini mimi aina
ya kutaka baadhi Nakala hapa pia.

69
00:03:39,730 --> 00:03:43,020
Hivyo basi tu kuongeza kitu
super rahisi juu ya

70
00:03:43,020 --> 00:03:45,210
picha, kama header.

71
00:03:45,210 --> 00:03:50,830
Wote nimekuwa kufanya hivyo mbali ni kutumia header
tag, H1, na line mapumziko tag, br.

72
00:03:50,830 --> 00:03:54,900
header tag hufanya font kidogo
kidogo kubwa na maarufu zaidi.

73
00:03:54,900 --> 00:03:58,930
tag line mapumziko, kwa upande mwingine
mkono, ni aina ya baridi.

74
00:03:58,930 --> 00:04:03,720
Tofauti na wengi vitambulisho nyingine, huna
kufungua na kufunga mapumziko tag, tu

75
00:04:03,720 --> 00:04:05,120
moja hapo juu.

76
00:04:05,120 --> 00:04:10,420
Hii ni kwa sababu ya kuvunja hana maudhui ya
na ni hiyo, hiki tupu.

77
00:04:10,420 --> 00:04:14,940
>> Mambo tupu kama hii, unaweza kufungua
na karibu wakati huo huo tu kwa

78
00:04:14,940 --> 00:04:20,420
ikiwa ni pamoja na mbele kufyeka katika
mwisho wa tamko awali.

79
00:04:20,420 --> 00:04:24,390
Hivyo sasa tovuti yangu inaonekana kidogo
kitu kama hiki.

80
00:04:24,390 --> 00:04:27,410
Bora, lakini ni aina ya anahisi
kama maiti ya mwisho.

81
00:04:27,410 --> 00:04:30,850
Kuna mahali pengine pa kwenda kando
kutoka ukurasa huu kuu.

82
00:04:30,850 --> 00:04:33,075
Naam, hebu kurekebisha na
ikiwa ni pamoja na kiungo.

83
00:04:33,075 --> 00:04:36,860
>> Nini mimi kwenda kufanya hapa ni kutumia
sifa ulionyehsa kwa A na kufanya

84
00:04:36,860 --> 00:04:40,780
picha kiungo kwa, hebu sema, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Kwa njia hiyo, wakati wowote mtu yeyote Clicks juu yangu,
browser yao itakuwa kwa madhumuni ya

86
00:04:44,460 --> 00:04:47,810
mwingine, pengine zaidi
muhimu, ukurasa wa mtandao.

87
00:04:47,810 --> 00:04:51,040
Nimepata ili kupunguza ukubwa wa
Nakala kidogo kwa sababu mtandao wetu ukurasa ni

88
00:04:51,040 --> 00:04:52,470
kupata ya juu zaidi.

89
00:04:52,470 --> 00:04:54,590
Lakini pengine, bado ni wazi.

90
00:04:54,590 --> 00:04:59,460
Tovuti yangu inaonekana sawa tu
sasa, wakati mimi bonyeza picha,

91
00:04:59,460 --> 00:05:04,410
browser yangu kufungua mwingine
tab kwa CS50.tv mtandao ukurasa.

92
00:05:04,410 --> 00:05:08,970
>> Mwisho, hebu sema mimi nina kwenda style
tovuti hii baadaye kwa kutumia CSS.

93
00:05:08,970 --> 00:05:11,730
CSS ni nini inajulikana kama
kuachia style karatasi.

94
00:05:11,730 --> 00:05:15,230
Na kimsingi hutoa ufanisi
njia ya hariri na style

95
00:05:15,230 --> 00:05:16,910
vitalu sawa ya maadili.

96
00:05:16,910 --> 00:05:21,290
Mimi nataka kuanza kuandaa HTML yangu
kufanya hivyo ni rahisi style baadaye.

97
00:05:21,290 --> 00:05:26,900
Hapa, mimi kuanzisha aina mbili tofauti za
vitambulisho kwa kusaidia kuandaa code yangu.

98
00:05:26,900 --> 00:05:31,170
Nimekuwa kutumika ID sifa ndani ya
mgawanyiko, au div tag, na nimekuwa kutumika

99
00:05:31,170 --> 00:05:34,120
Hatari sifa ndani ya
tag mwingine div.

100
00:05:34,120 --> 00:05:37,190
>> ID na Hatari sifa
kazi vile vile.

101
00:05:37,190 --> 00:05:41,210
tofauti tu ni unaweza tu na
hiki moja, ID maalum, lakini

102
00:05:41,210 --> 00:05:43,600
idadi yoyote ya mambo
wanaweza kushiriki darasa.

103
00:05:43,600 --> 00:05:47,690
Hivyo kwa mfano, naweza kutumia darasa
picha mara nyingi, lakini siwezi

104
00:05:47,690 --> 00:05:50,533
kujenga mgawanyiko mwingine
na ID ya juu.

105
00:05:50,533 --> 00:05:54,750
Ingawa mimi si wamekwenda CSS,
lugha nyingine kawaida kutumika

106
00:05:54,750 --> 00:05:59,700
pamoja na HTML, mara moja mimi kuanza styling
code yangu na CSS, naweza kutumia hizi

107
00:05:59,700 --> 00:06:03,730
sifa ya shirika na ushawishi
mtandao wangu ukurasa wa aesthetics.

108
00:06:03,730 --> 00:06:07,600
>> Kila kitu ndani ya ngazi ya juu
itakuwa na stylings sawa au

109
00:06:07,600 --> 00:06:12,010
kundi lingine la HTML mimi kundi katika
darasa picha kushiriki sawa kuangalia.

110
00:06:12,010 --> 00:06:15,700
Hii ni rahisi zaidi kuliko kujaribu hariri
na picha style au vitalu ya

111
00:06:15,700 --> 00:06:17,690
Nakala mmoja mmoja.

112
00:06:17,690 --> 00:06:21,480
>> Hivyo sisi akaenda juu ya misingi ya jinsi
kufanya ukurasa wa mtandao na HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ina rundo la makala nyingine pia
kwamba wakati paired na lugha nyingine

114
00:06:25,280 --> 00:06:29,220
kama CSS na JavaScript, unaweza kweli
kufanya kurasa kusimama nje.

115
00:06:29,220 --> 00:06:32,960
njia bora ya kupata starehe na
HTML ni kwa fujo karibu na hayo,

116
00:06:32,960 --> 00:06:35,120
kuona kazi gani, na nini hana.

117
00:06:35,120 --> 00:06:36,570
>> Jina langu ni Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Hii ni CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Hivyo kwa mfano, naweza kutumia
darasa picha -

121
00:06:45,690 --> 00:06:48,028
Hapana, kuna sifa nyingi.

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

123
00:06:52,500 --> 00:06:53,950
Jina langu ni Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Hii ni CS 650.

125
00:06:58,560 --> 00:06:59,810
Nataka kusema CSS.

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

127
00:07:02,325 --> 00:07:03,575
Hii ni CSS.

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