Kuunda Wavuti Yako ya Kwanza: Hatua 10

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:50

Katika mafunzo haya utajifunza kujenga ukurasa msingi wa wavuti ambao una karatasi ya mtindo iliyounganishwa na faili ya maingiliano ya javascript.

Hatua ya 1: Kuunda folda yako

Unda folda ya faili ambazo tutaunda zihifadhiwe. Jisikie huru kuiita jina hata unapendeza, kumbuka tu iko wapi kwa sababu tutakuwa tukihifadhi faili baadaye.

Hatua ya 2: Kuunda Faili Yako ya Kwanza

Fungua mhariri wa maandishi unayopenda. Katika kesi yangu nitatumia tu kijarida kilichojengwa cha Windows 10. Mara tu unapokuwa na faili mpya chapa yafuatayo:

Huu ni ukurasa wangu wa kwanza wa wavuti, ulioletwa kwako na anayeweza kufundishwa

Hii ndio inayojulikana kama lebo ya HTML. Inasimama kwa Kichwa 1. Maandishi tunayoweka ndani ya lebo hii yataonekana kama kichwa kwenye ukurasa. Imefunguliwa na kufungwa hivi. Maandishi kati ya vitambulisho viwili ndio yataonyeshwa kwenye kivinjari chako cha wavuti. Sehemu ambayo inasema inapeana lebo hiyo sifa ambayo tutarejelea katika hatua x. Mara tu hiyo ikimaliza endelea na uhifadhi faili kwenye folda tuliyoifanya katika hatua ya 1 kama index.html.

Hatua ya 3: Fungua faili

Sasa kwa kuwa tumekamilisha nenda kwenye faili ndani ya folda tuliyounda, bonyeza kulia faili na uchague chaguo "wazi na" na uchague kivinjari unachotumia. Kwa upande wangu hii ni google chrome. Sasa tazama kazi ya bidii yako hadi sasa!

Hatua ya 4: Styling Ukurasa wako

Kama ilivyo, wavuti yetu iko wazi. Tutaongeza kile kinachojulikana kama karatasi ya mtindo wa kuachia ili kununulia vitu kidogo. Unda faili mpya ya maandishi na andika yafuatayo:

h1 {rangi: bluu; pangilia maandishi: katikati;}

Tunachokwambia kivinjari hapa ni kupata kipengee chochote kwenye lebo ya h1 (ambayo tulijifunza juu ya hatua ya 2) na kuipatia rangi ya hudhurungi na kuiweka katikati ya ukurasa. Hifadhi faili hii kwenye folda tuliyoiunda katika hatua ya 1 kama style.css.

Hatua ya 5: Unganisha Style.css kwa Index.html yako

Kwa wakati huu tuna faili mbili tofauti ambazo hazijui kuhusu kila mmoja. Tunahitaji kuwaambia faili yetu ya index.html kwamba tuna faili ya style.css ambayo tunataka irejelee na kunyakua mtindo kutoka. Ili kufanya hivyo tutafungua faili yetu ya index.html katika mhariri wa maandishi yetu, na juu ya lebo yetu ya h1 tutaongeza kile kinachojulikana kama kitambulisho cha kiungo. Lebo ya kiungo hufanya kama vile jina lake linamaanisha, inaunganisha na kitu. Kwa upande wetu karatasi ya mitindo. Endelea na andika. Lebo ya kiunga ni kitambulisho cha kujifunga kwa hivyo tepe ya kumaliza haihitajiki. Rel inasimama kwa uhusiano na href inaambia faili ya faharisi ambapo faili yetu ya nje tunayorejelea iko. Sasa hifadhi faili hiyo ya index.html.

Hatua ya 6: Tazama Ukurasa wako Mpya uliotiwa Styled

Pitia tena hatua ya 3 na upakie upya ukurasa wako wa wavuti na uangalie jinsi mabadiliko yanavyoonyesha.

Hatua ya 7: Kuunda Kitufe

Fungua tena faili yako ya index.html katika kihariri chako cha maandishi na andika yafuatayo:

Bonyeza mimi!

na uhifadhi faili. Hii inaunda kipengee cha kifungo kwenye ukurasa. Mara baada ya kuokolewa, fungua tena faili kama inavyoonyeshwa katika hatua ya 3 na uhakikishe kitufe kiko chini upande wa kushoto wa ukurasa wako.

Hatua ya 8: Unda Faili yako ya Javascript

Mwishowe tutaunda faili yetu ya javascript. Hii ndio itafanya tovuti yetu kuingiliana. Fungua kihariri cha maandishi na andika yafuatayo:

document.querySelector ("# button"). addEventListener ("bonyeza", kazi () {

document.querySelector ("# heading"). innerText = "Kubadilisha kichwa juu ya nzi"

})

Tunachofanya ni kuuliza hati itupatie kipengee na kitambulisho cha kitufe, na tutafanya kitufe kujibu hafla ya kubofya kwa kubadilisha maandishi ya vitu na kitambulisho cha kuelekea "Kubadilisha kichwa juu ya nzi ". Hifadhi faili kama kifungo.js kwenye folda tuliyounda katika Hatua ya 1.

Hatua ya 9: Unganisha Javascript yako na Faili za Viashiria

Kama tulivyofanya na faili ya style.css, tunahitaji kuwaambia faili yetu ya index.html kuhusu faili yetu ya javascript. Chini chini ya kila kitu ambacho tumefanya hadi sasa andika yafuatayo:

Lebo ya hati huturuhusu kuongeza lugha ya maandishi (kwa upande wetu, javascript) ili kutoa utendaji kwenye ukurasa wetu. Tunaiambia itafute faili inayoitwa button.js na uongeze nambari yote iliyomo ndani yake kwa faili yetu ya faharisi. Mara baada ya kuchapishwa, hifadhi faili na ufungue faili tena kama inavyoonyeshwa katika hatua ya 3.

Hatua ya 10: Jaribu Kitufe Iliyoundwa Mpya

Sasa endelea na bonyeza kitufe na angalia mabadiliko ya kichwa!

Hongera sana !! Sasa umeunda ukurasa wako wa kwanza wa maingiliano! Nashangaa ni kiasi gani zaidi unaweza kuichukua ukijua unayojua sasa ??