Kuunda Tovuti Yako Mwenyewe kwa Kompyuta: Hatua 5

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

Ikiwa umewahi kuota kuwa programu ya kompyuta au umewahi kutumia wavuti, ambayo tukubaliane nayo, karibu sisi sote, teknolojia ya habari imekuwa mhimili wa biashara. Ingawa programu inaweza kuonekana kuwa ya kutisha mwanzoni, lengo langu ni kukufundisha misingi ya muundo wa wavuti ili baada ya mafunzo haya, utaweza kutengeneza ukurasa wako wa wavuti. Na hiyo nje ya njia, wacha tuifikie!

Vifaa

• Macintosh au Windows PC (ingawa Linux distros pia inaweza kutumika, ninaiziruka kwa sasa kwani huu ni utangulizi wa Kompyuta).
• Chaguo lako la mhariri wa maandishi (Notepad kwenye Windows, TextEdit kwenye Mac) au chaguo lako la IDE. Kwa uzoefu wangu, nimegundua Msimbo wa Studio ya Visual kufanya kazi bora kwangu kwa hivyo ningependekeza pia kuichunguza hapa: https://code.visualstudio.com/ sembuse inafanya kazi kwenye majukwaa yote ya OS.

Hatua ya 1: Vitambulisho na Historia kidogo

Mara tu ukiamua juu ya chaguo lako la mhariri wa maandishi au IDE, wacha tuanze na misingi.

Amini usiamini, HTML au Lugha ya Markup ya HyperText imekuwa karibu kwa karibu miaka 30 sasa na kila mwaka umekuja maboresho zaidi na zaidi kwa lugha hiyo. Sasa, unaweza kuwa unauliza, kivinjari kinatafsiri vipi kuweka kwenye skrini? Hii imefanywa katika sehemu chache:

Uundaji wa hati ya HTML ni rahisi. Una sehemu mbili zinazojulikana kama kichwa na mwili. Kichwa cha wavuti kina msimbo ambao hauonekani kwa mtumiaji. Hii inatumiwa kwa kuunganisha karatasi za mitindo na kutangaza bits zingine zinazohitajika kwa wavuti kuonyesha vizuri. Kufuatia kichwa, mwili uko kama unavyosikika, mwili wa wavuti. Hapa ndipo unapozungumza sauti yako na kuonyesha watazamaji ujuzi wako mzuri wa HTML! Sasa sio rahisi kama tu kuandika maandishi mwilini na kuionesha kwa njia unayotaka, lakini ni rahisi kwa maana na utumiaji wa vitu tunavyoviita vitambulisho.

Hapa kuna lebo kadhaa za msingi za HTML:

• kichwa - ambacho hutumiwa kuelezea kivinjari jina la ukurasa huo ni nini. Hii pia ndio unayoona unapoangalia kichupo cha ukurasa wa wavuti.
• h1, h2, h3, h4 - ambayo hutumiwa kwa saizi tofauti za kichwa na h1 kuwa kubwa na h4 kuwa ndogo. Nitafunika zaidi juu ya hii katika sehemu inayofuata.
• p - aya, inayotumiwa kuandika aya za maandishi. Kama aya kwenye karatasi.
• br - mapumziko, ambayo huingiza mapumziko kulingana na maandishi.
• a - kutumika kwa kuunda viungo kwa kurasa zingine, kama kiungo kinachoweza kubofyeka.
• img - kutumika kwa kuunganisha picha kwenye ukurasa wa wavuti.
• ul, ol, li - orodha ambazo hazina mpangilio, orodha zilizoagizwa, na orodha ya vitu.
• - hutumiwa kwa kutoa maoni yaliyomo ndani kwenye nambari ambayo haitaonekana na mtumiaji wa mwisho.

Na hapa kuna vitambulisho vya CSS (visual):

• rangi - hutumiwa kupeana rangi maalum kwa kipengee fulani au kuweka kwenye ukurasa wa wavuti.
• saizi ya fonti - hutumiwa kubadilisha saizi ya fonti kwenye ukurasa.
• rangi ya asili - inayotumiwa kubadilisha rangi ya asili ya kitu fulani au ukurasa mzima.

Nimeambatanisha pia karatasi ndogo ya kudanganya kukusaidia ikiwa unahisi kupotea kidogo, lakini usiwe na wasiwasi, utapata wakati huo! Kwa kuongeza, www.w3schools.com pia ni rasilimali nzuri kwa maswali yako yoyote ya programu. Kwa kweli wameniokoa wakati au pia.

Kimsingi jinsi kivinjari kinasoma faili ni rahisi. Inakwenda mstari na mstari na inafanya kazi kwa kazi. Wahusika hutumiwa kutangaza lebo kama vile

na hutumiwa kufunga lebo kama vile

. Hii ni muhimu vinginevyo kivinjari sio mahali pa kuacha. Katikati ya

na

vitambulisho, ndipo unapoingiza chochote unachopenda!

Hatua ya 2: Usanidi wa Mhariri

Sasa kwa kuwa tumefunika kidogo juu ya vitu vya msingi vya wavuti ya HTML, wacha tuingie na tuijaribu yetu wenyewe. Kwa hatua hii inayofuata nitatumia Msimbo wa Studio ya Visual kupanga wavuti, lakini mpangilio wa nambari hiyo itakuwa sawa ikiwa uko sawa na kutumia tu Notepad au TextEdit.

Ndani ya Notepad:

• Na Notepad, programu inazindua na faili tupu ambayo inafanya iwe rahisi sana kuanza. Hii pia itaturuhusu kuruka hatua chache ikilinganishwa na kutumia VS Code. Wacha tuanze kwa kuhifadhi faili katika muundo sahihi.
• Bonyeza Faili> Hifadhi
• Ingiza jina la faili yako ikifuatiwa na.html na chini ya Hifadhi kama aina, chagua faili zote. Bonyeza kuokoa.

Ndani ya Msimbo wa VS:

• Njia bora kwako kuchukua faida ya huduma zote za IDE ni kuanza kwa kuunda faili na kuwaambia IDE ni aina gani ya faili. Hii inaweza kufanywa kama ifuatavyo:
• Bonyeza Faili> Faili Mpya
• Faili tupu inafungua
• Ifuatayo, utataka kuanza kwa kuhifadhi faili, ingawa iko wazi, kwani hii itawaruhusu IDE kuweza kuelewa ni aina gani ya faili bidhaa ya mwisho itakuwa. Wakati wa kuokoa hakikisha ujumuishe ugani wa.html mwishoni mwa jina la faili. Bonyeza kuokoa.

Hatua ya 3: Ramani

Baada ya kufanikiwa kuhifadhi faili yako ya jina la faili.html, wacha tuanze kwa kuunda mfumo wa ukurasa wetu wa wavuti. Kumbuka kutoka juu ni sehemu gani muhimu za faili tunazohitaji kutangaza kabla hatujaanza na kuunda ukurasa wote wa HTML. Kidokezo cha pro: wakati wa kuanza mfumo wa wavuti, lebo ya HTML ya DOCTYPE inaambia kivinjari kuwa faili inayosoma ni faili ya html. Hii inaweza kukufaa ikiwa una aina tofauti za nambari kwenye faili moja na unataka kubadili kati ya wakalimani. Kwa upeo wa hii inayoweza kufundishwa, hatutagusa sana juu ya hii lakini ikiwa baada ya hii inayoweza kufundishwa una hamu ya kuangalia zaidi juu ya ukuzaji wa HTML, jisikie huru kuipiga risasi. Nitaingiza lebo ya HTML ya DOCTYPE juu ya faili kwa mazoezi bora. Kumbuka kufungua na kufunga na.

Hapa ndipo kuokoa faili kabla ya kuanza programu kunafaa, sasa IDE inajua kuwa inafanya kazi na faili ya HTML, itatumia busara kumaliza usemi na kutoa maoni ili usisahau kufunga lebo. Kumbuka kuwa kwa wale ambao unatumia Notepad, akili haipatikani kama ilivyo kwenye IDE. Tunaanza kwa kuingiza vitambulisho vya kichwa na mwili kama ifuatavyo: (tazama picha ya pili).

Sasa kwa kuwa usanidi wa hati umekamilika, tunaweza kwenda kwenye mbio na kuburudika!

Hatua ya 4: Kanuni; Kanuni; Kanuni;

Tunaweza kuanza kwa kuingiza kichwa cha faili yetu mpya. Ingiza chochote unachopenda. Kumbuka kwamba hili ndilo jina linaloonekana kwenye kichupo cha kivinjari. Wacha tuanze pia kwa kuingia kichwa cha wavuti yetu. Kumbuka kutoka hapo awali jinsi tunavyofanya hivi. Je! Nilisikia h1 / 2/3/4? Hiyo ni kweli!

Kabla ya kuendelea, naona inafaa kufungua faili yetu kwenye dirisha la kivinjari ili tuweze kuona kwa wakati halisi jinsi mabadiliko yetu yanavyoonekana kwenye kivinjari. Unaweza kufanya hivyo kwa kubofya Faili> Hifadhi ili kuhifadhi faili, ukienda kwenye folda ambayo faili ya HTML imehifadhiwa, kwangu hii ni eneo-kazi, na tumia kivinjari unachopenda kufungua faili na je!, kuna ukurasa wako wa wavuti! Kumbuka: Mimi binafsi hutumia Safari kama kivinjari changu cha chaguo kwenye kompyuta yangu, hata hivyo, katika ukuzaji wa wavuti, Firefox ni kivinjari wastani cha dhahabu cha kujaribu kwani inafanya kazi na karibu kila lugha ya maandishi ya wavuti.

Kama unavyoona, kichwa kinaonyeshwa kwenye kichupo, na pia kuona kichwa chetu cha h1. Ninapendelea kuwa na dirisha la kivinjari la faili lililofunguliwa kando ya IDE kama unapofanya mabadiliko kwenye IDE na kuhifadhi, mabadiliko ni ya haraka kwenye kivinjari.

Jisikie huru kujaribu kuongeza vitambulisho na kucheza karibu na vitu tofauti unavyoweza kufanya na HTML. Kama unavyoona hapa chini, nimeongeza aya chache, mapumziko, kiunga cha nje kwa Instructables.com, picha, (ambayo inaweza kuunganishwa kutoka kwa chanzo cha nje au ndani ya saraka sawa na mahali faili yaHTML imehifadhiwa), mfano wa orodha isiyo na kipimo, orodha iliyoagizwa, na mwishowe maoni.

Ikiwa unataka kujaribu kuongeza rangi, na chaguzi za mpangilio, unaweza kuingiza lebo ya mtindo kwenye kichwa cha faili. Hapa ndio hatua ambayo hii hubadilika kutoka HTML kwenda CSS lakini kwa sababu ya kuona, nitaingiza mistari michache ili uweze kuona jinsi hii inafanya kazi. Kimsingi jinsi CSS inavyofanya kazi inakuwezesha kudhibiti vipengee vya HTML ndani ya kazi kwa kutumia mabano {} kuingiza nambari yako kwa kipengee maalum cha HTML.

Hatua ya 5: Mawazo ya Mwisho

Na hapo unayo; umefanikiwa kuunda ukurasa wako wa kwanza wa wavuti! Kwa sababu huu ni mwongozo wa Kompyuta, ninataka kufanya uzoefu wako wa kwanza na HTML uwe wa kufurahisha. Njia bora ya kujifunza katika uzoefu wangu ni kupiga mbizi na kujaribu vitu mikono, angalia kile unaweza kufanya na nambari yako na pia uone jinsi unaweza kuvunja nambari yako. Hii inajenga uadilifu na inakusaidia kuelewa vizuri jinsi na kwa nini nambari inafanya kazi vile inavyofanya kazi. Kumbuka kuwa www. W3Schools.com ni nyenzo nzuri kwa maswali na hata hutoa sanduku la mchanga ndani ya kivinjari kujaribu nambari yako. Tunatumahi umejifunza jambo na usimbuaji mzuri!