>> DAVEN FARNHAM: Leo, mimi nina kwenda kwa kuzungumza kidogo juu ya HTML,
HyperText Markup Language.
Unaweza kuona HTML kila mahali siku hizi.
Kwa kweli, kama wewe ni kuangalia hii video katika browser, wewe ni
kuona HTML hivi sasa.
HTML ni si lugha ya programu, badala yake, ni lugha ghafi kutumiwa na
browsers mtandao atatoa kurasa kwenye mtandao.
>> Basi unaweza kuuliza, jinsi gani hasa ni kuandika ukurasa wa mtandao katika HTML mbalimbali
kutoka kuandika mpango katika programu lugha kama C?
Naam, C ni lugha na kali sana sheria syntactical kwamba mahitaji ya kuwa
ulioandaliwa kabla ya kukimbia.
Kama ve milele wamesahau ni pamoja na semicolon mwishoni mwa taarifa katika
C code yako, unajua nini mimi kuzungumza kuhusu inayohusiana na syntax kali.
>> Browsers mtandao ingawa, ni kidogo zaidi kusamehe linapokuja suala la HTML.
Hata kama HTML yako si syntactically sahihi, ukurasa wako bado wanaweza kuwa
kuonyeshwa na browser, lakini nguvu si kuangalia kama wewe lengo.
Hivyo ni daima bora ya kufuata sheria.
njia bora ya kupata Intuition kuhusu jinsi mambo kazi ni kwa
kwenda kwa njia ya mfano.
>> Hivyo nini sisi hapa ni ya msingi mwongozo kwa ukurasa wa mtandao.
Pengine niliona mambo mengi katika kati ya mabano angled.
Naam, wale ni vitambulisho tu.
Tags kimsingi kuwajulisha browsers mtandao kwamba, hey, kitu
ni kuja njia yako.
Kumbuka ingawa, wakati wowote kufungua tag, unahitaji kuifunga mara moja wewe ni
kufanyika kwa kutumia yake.
>> Hivyo kwa mfano, mimi wazi sehemu ya maadili ya na wazi
bracket mwili, bracket karibu.
Mimi kisha kuongeza baadhi ya maandishi, katika kesi hii, yangu kwanza katika ukurasa wa mtandao kisha wakati nilikwenda
karibu sehemu hii, mimi kutumia karibu tag kufanana isipokuwa wakati huu na
mbele kufyeka kabla ya mwili.
Kwa ujumla, hii ni format uko kwenda kutumia wakati wewe ni kufungua
na kufunga vitambulisho.
Pamoja, tag wazi na tag mwisho kutunga kile kinachoitwa hiki.
>> Kama ukiangalia mstari wa kwanza, itabidi kuona Moderators kumweka ikifuatiwa na
DOCTYPE html.
Hii ni kweli kuwaambia tu ya browser yako kwamba faili ni ukurasa wa mtandao
Imeandikwa katika HTML.
Tag HTML kimsingi anasema, inakuja baadhi HTML.
Basi tuna tag kichwa na cheo tag ndani yake.
tag kichwa unaweza kufikiria kama inahusu HTML code kwamba anakuja kwa
wingi wa mtandao wako ukurasa wa halisi maudhui.
>> Kwa ujumla, kuweka jina la yako mtandao ukurasa hapa, ingawa kuna baadhi ya
tags nyingine ambayo inaweza kuonekana hapa pia.
Pili inakuja mwili ya mtandao ukurasa wako, nyama halisi na mifupa ya tovuti yako.
Katika mfano wetu, tumekuwa tu ya kuweka rahisi hukumu, Webpage yangu ya kwanza,
ambayo, kama sisi kukimbia tovuti yetu, kuangalia kitu kidogo kama hii.
Mtandao wetu ukurasa si pia queer, lakini usijali.
Tutaweza spruce it up hivi karibuni.
>> Hivyo HTML hapo juu, sisi nitakupa sana template msingi kwa ajili ya ukurasa wa mtandao,
kitu dhana tu, tu mifupa tupu.
Lakini kama mimi nina kujenga mtandao wa nini kama mimi unataka kuongeza
picha ya, kusema, mimi mwenyewe?
Naam, siwezi kufanya hivyo.
Kuna michache ya njia ya kuongeza picha kwenye tovuti yako.
Kama picha ni katika folder moja kama HTML faili yako, unaweza zilizounganishwa na
picha kupitia njia kama hii.
>> Unaweza kufungua na tag picha ikifuatiwa na katika Alt sifa katika
chanzo cha picha.
Thamani Alt sifa ni baadhi tu ya Nakala mbadala katika kesi mtumiaji anaweza si
kuona picha.
Au, unaweza pia zilizounganishwa na images kupitia URL full, kama hii.
Sasa, tovuti ya kwamba si kweli zipo, lakini kama kulikuwa na picha ya
yangu katika anwani hiyo, mimi naweza kutumia chanzo URL ni pamoja na
sura yake kwenye tovuti yangu.
Aidha njia, wewe kuishia na kiasi prettier tovuti, kitu kama hiki.
>> Naam, hiyo ni pretty baridi, lakini mimi aina ya kutaka baadhi Nakala hapa pia.
Hivyo basi tu kuongeza kitu super rahisi juu ya
picha, kama header.
Wote nimekuwa kufanya hivyo mbali ni kutumia header tag, H1, na line mapumziko tag, br.
header tag hufanya font kidogo kidogo kubwa na maarufu zaidi.
tag line mapumziko, kwa upande mwingine mkono, ni aina ya baridi.
Tofauti na wengi vitambulisho nyingine, huna kufungua na kufunga mapumziko tag, tu
moja hapo juu.
Hii ni kwa sababu ya kuvunja hana maudhui ya na ni hiyo, hiki tupu.
>> Mambo tupu kama hii, unaweza kufungua na karibu wakati huo huo tu kwa
ikiwa ni pamoja na mbele kufyeka katika mwisho wa tamko awali.
Hivyo sasa tovuti yangu inaonekana kidogo kitu kama hiki.
Bora, lakini ni aina ya anahisi kama maiti ya mwisho.
Kuna mahali pengine pa kwenda kando kutoka ukurasa huu kuu.
Naam, hebu kurekebisha na ikiwa ni pamoja na kiungo.
>> Nini mimi kwenda kufanya hapa ni kutumia sifa ulionyehsa kwa A na kufanya
picha kiungo kwa, hebu sema, CS50 TV.
Kwa njia hiyo, wakati wowote mtu yeyote Clicks juu yangu, browser yao itakuwa kwa madhumuni ya
mwingine, pengine zaidi muhimu, ukurasa wa mtandao.
Nimepata ili kupunguza ukubwa wa Nakala kidogo kwa sababu mtandao wetu ukurasa ni
kupata ya juu zaidi.
Lakini pengine, bado ni wazi.
Tovuti yangu inaonekana sawa tu sasa, wakati mimi bonyeza picha,
browser yangu kufungua mwingine tab kwa CS50.tv mtandao ukurasa.
>> Mwisho, hebu sema mimi nina kwenda style tovuti hii baadaye kwa kutumia CSS.
CSS ni nini inajulikana kama kuachia style karatasi.
Na kimsingi hutoa ufanisi njia ya hariri na style
vitalu sawa ya maadili.
Mimi nataka kuanza kuandaa HTML yangu kufanya hivyo ni rahisi style baadaye.
Hapa, mimi kuanzisha aina mbili tofauti za vitambulisho kwa kusaidia kuandaa code yangu.
Nimekuwa kutumika ID sifa ndani ya mgawanyiko, au div tag, na nimekuwa kutumika
Hatari sifa ndani ya tag mwingine div.
>> ID na Hatari sifa kazi vile vile.
tofauti tu ni unaweza tu na hiki moja, ID maalum, lakini
idadi yoyote ya mambo wanaweza kushiriki darasa.
Hivyo kwa mfano, naweza kutumia darasa picha mara nyingi, lakini siwezi
kujenga mgawanyiko mwingine na ID ya juu.
Ingawa mimi si wamekwenda CSS, lugha nyingine kawaida kutumika
pamoja na HTML, mara moja mimi kuanza styling code yangu na CSS, naweza kutumia hizi
sifa ya shirika na ushawishi mtandao wangu ukurasa wa aesthetics.
>> Kila kitu ndani ya ngazi ya juu itakuwa na stylings sawa au
kundi lingine la HTML mimi kundi katika darasa picha kushiriki sawa kuangalia.
Hii ni rahisi zaidi kuliko kujaribu hariri na picha style au vitalu ya
Nakala mmoja mmoja.
>> Hivyo sisi akaenda juu ya misingi ya jinsi kufanya ukurasa wa mtandao na HTML.
HTML ina rundo la makala nyingine pia kwamba wakati paired na lugha nyingine
kama CSS na JavaScript, unaweza kweli kufanya kurasa kusimama nje.
njia bora ya kupata starehe na HTML ni kwa fujo karibu na hayo,
kuona kazi gani, na nini hana.
>> Jina langu ni Daven Farnham.
Hii ni CS50.
>> Hivyo kwa mfano, naweza kutumia darasa picha -
Hapana, kuna sifa nyingi.
Jina langu ni Daven Farnham.
Hii ni CS 650.
Nataka kusema CSS.
Hii ni CSS.