Msamiati
R I P
- Mar 6, 2011
- 1,063
- 700
[video=youtube_share;hHhPmRHvMRI]http://youtu.be/hHhPmRHvMRI[/video]
Unit- 1
Website ni kitu gani ?
Kwa tafsiri ya haraka haraka tunaweza kusema kuwa website ni mahali panapotumika kuhifadhi webpage moja ama zaidi. Hii elimu inaweza kuchukuliwa katika mtazamo mgumu zaidi kutokana na kuwa na terminology nyingi za ki-technolojia, Hivyo ngoja tujaribu kupita njia nyingine.
Katika Kozi hii nitakutaka uelewe kuwa website ni folder la kuhifadhia Taarifa. Nasisitiza, muda wowote nitakapokuwa nazungumzia website kwenye kozi hii, nitakuwa nazungumzia folder maalum ambalo linatumika kuhifadhi taarifa.
Taarifa zinazohifadhiwa kwenye Website ni taarifa zinazokuwa kwenye mfumo/muundo wa mafile. Mafile haya yanaweza kuwa mafile ya picha, sauti, video au mafile ya maandishi.
Kuweka uelewa sawa nitatoa mifano michache ya aina za mafile nilizozitaja hapo juu.
Mafile ya picha: ni kama vile nembo yako ya biashara au picha zako za Birthday ni picha za kawaida kabisa.
Mafile ya sauti: ni kama vile wimbo mpya wa Alikiba aliomshirikisha Diamond, ni audio za kawaida kabisa.
Mafile ya Video: ni kama vile video uliyo mrekodi mtoto kutumia simu yako, inaweza kuwa aina yoyote ya video.
Mafile ya Maandishi: Ni kama vile Barua ya maombi ya kazi uliyo type kwa kutumia Program ya Microsoft word.
Note: Kumbuka, Kazi kubwa ya Website ni kubadilishana Taarifa na Habari. Hivyo basi hakuna kitu cha ajabu wala msamiati wa kutisha kwenye taaluma hii, zaidi ya mafile hayo ya kawaida kabisa ambayo tumekuwa tukicheza nayo kila kukicha kwenye matumizi yetu ya kompyuta ya kawaida, hapa tutafanya kitu rahisi kabisa cha kubadili matumizi ya kawaida kuwa matumizi ya uzalishaji kwa kutengeneza website zenye mvuto.
Kazi imeanza, funga mkanda na kaa mkao wa kula, ndani ya muda mchache kabisa utaanza kutengeneza Website za aina yake.
Assignment:
Tengeneza website yako ya Kwanza kwenye compyuta yako, ipe jina lolote kisha ndani yake weka aina nne za mafile nilizoelezea hapa.
Unit- 2
Kama jinsi tulivyojifunza kuwa jana kuwa website ni mahali ambapo mafile ya picha, sauti, maandishi na video yanahifadhiwa. Zingatia kuwa mafile hayo ndio yanayotumika katika kufikisha ujumbe uliokusudiwa na website husika.
Hapa nitakufundisha msingi wa vitu vitatu muhimu kuvielewa kwenye teknolojia hii.
1. Chanzo- Mahali website ilipo hifadhiwa.
2. WebBrowser- Software ambayo hutumika kutembelea (kufungua) mafile ya website mbali mbali.
3. Usafirishaji- Njia ambayo hutumika kusafirisha mafile kutoka kwenye Chanzo mpaka kwenye WebBrowser ya mtumiaji wa website.
1. Chanzo
Hatuhitaji kudili na chanzo muda huu kwakua ni mada kubwa sana ambayo tutaijadili baadaye nitakapokuwa nafundisha kuhusu Servers kama nilivyoahidi kwenye utangulizi. Hivyo kwa sasa tambua tu kuwa Chanzo au mahali website ilipowekwa ni kitu muhimu sana kufahamu kwenye teknolojia hii.
2. Web Browser
Web Browser ni softwere maalum ambayo hutumika kufungulia mafaili yanayokaa kwenye website (ambayo niliyaelezea awali). Watu wengi hupenda kuita Browser kwaajili ya kurahisisha matamshi.
Web Browser ni maneno mawili (a) Web - Ambalo ni kifupisho cha Website (pitia maelekezo yaliyotangulia "Website ni kitu gani").
(b) Browser- Sitakuwa na uchambuzi wa kitaalamu sana kwenye neno hili kwasababu nakosa maneno mazuri ya kiswahili ya kufanyia ufafanuzi, lakini neno browser linatokana na neno browse ambalo pengine kwa maneno ya kiswahili tunaweza kusema chambua kwa maana ya kuchambua mafaili au pekenyua.
Hivyo muunganiko wa maneno haya unaleta neno web browser ambalo ni jina la software inayotumika kufukunyua taarifa zilizopo kwenye website na kuzionesha kwa mtumiaji (Browse and Display).
3. Usafirishaji
Kwenye mfumo huu wa kufikisha taarifa zilizopo kwenye website kwa mtumiaji, Usafirishaji ni mada kubwa ambayo hatutaizungumzia kabisa kwenye kozi hii, lakini unatakiwa kutambua tu kuwa internet ni njia mashuhuri zaidi inayotumiwa na website kuwafikia watumiaji.
Unit- 3- Web Adress
Hongera! kama umefanya assignment niliyotoa hapo juu, utakuwa umefanikiwa kutengeneza website yako ya kwanza na punde tu utakuwa Proffessional web Developer. Ili kujiridhisha kama umefanya assignment kwa usahihi tafadhari tizama Video hii Majibu ya assignment.
Uwasilishaji wa taarifa za kwenye website kwa mtumiaji
Bila shaka hivi sasa wote tunafahamu kuwa website ni mahali maalum palipoandaliwa kwaajili ya kuhifadhia mafaili ya taarifa, Ngoja tutanue uelewa kwa kufananisha website na jumba la habari.
Kwenye kielelezo hapo juu, ni mfano wa ramani ya majumba ukionesha mfano wa majumba ya habari yakiwa yametapakaa sehemu mbali mbali duniani. Mfano huu una randana kabisa na jinsi website zilivyo tapakaa katika kila kona duniani.
Kwenye mfano wangu wa majumba ya habari, sote tunajua kuwa nyumba zinakuwa na adress ambazo hurahisisha mawasiliano na usafirishaji.
Mpaka hivi sasa kuna zaidi ya website Bilion 1.1 duniani na zaidi ya watumiaji Billion 2.7 hivyo basi ili kumrahisishia mtumiaji kuzifikia taarifa za website tarajiwa lazima kila website iwe na Anuani (Adress). Adress za website huitwa web Adress.
Kuhusu web Adress pia ni mada pana ambayo tutaijadili kwa undani Siku zijazo. Lakini kwa sasa hebu tutizame jinsi tunavyoweza kupata adress ya website uliyoitengeneza kwenye kompyuta yako kupitia assigment iliyopita.
Kabla ya kuanza kwa kozi hii niligundua kuwa kinachofanya watu wengi washindwe kupata taaluma hii ni kutokana na kubeba mkusanyiko mkubwa wa misamiati ya kigeni inayopelekea elimu hii kutoeleweka na kuonekana kuwa ni ngumu.
Hivyo watu wengi wamekuwa wakifikiria kuwa pengine inahitaji elimu kubwa ili uweze kujifuza maswala haya, lakini ukweli ni kwamba kama unajua kusoma na kuandika na unafahamu matumizi ya kawaida kabisa ya kompyuta inatosha kabisa kukufanya uwe mtaalamu wa maswala ya website.
WebAdress ni maandiko yanayofafanua mahali ilipo website. Mfano mzuri ni Adress ya nyumba. Unapotaka kumuelekeza mtu nyumba ya Bwana Lenard Membe ilipo, utaanza kwa kumuelekeza //Nchi ilipo kisha //utamuelekeza mkoa//Utamuelekeza wilaya// utamuelekeza kata//utamuelekeza mtaa// mwisho utamtajia namba ya nyumba.
Tizama vizuri nilivyo ainisha adress ya nyumba namba kgg358, mfumo huu umetumika mara zote kwenye kuainisha adress za Website japokuwa upande huu zimetumika namba badala ya maneno kama nilivyo ainisha hapo juu. Sasa basi, nitamalizia somo hili kwa kuonesha ni jinsi gani utaweza kupata Adress ya Website yako uliyotengeneza kwenye assignment.** //Nchi ilipo kisha //utamuelekeza mkoa//Utamuelekeza wilaya//utamuelekeza kata//utamuelekeza mtaa//mwisho utamtajia namba ya nyumba.
** //Tanzania//Dar es Salaam//Kinondoni//Kigogo//mkwajuni//kgg358.
1. Awali nilisema kuwa website huweza kutembelewa kwa kutumia web browser, ili web Browser iweze kuifikia website yako na kukuonesha mafile yaliyomo ndani yake unalazimika kufahamu adress ya website yako ndani ya komputer, adress yako italazimika kuanza na neno file likifatiwa na alama tatu za slash (/). Kama hivi file:///
2. Angalia phisical adress ya website yako (Location ya Website yako). ili kupata maelekezo rahisi ya kifahamu adress ya website yako tizama video hii. Web Adress .
- ili uweze kuipata location hii utabonyeza left click kwenye folder ambalo ndio website yako, kisha utabonyeza propertise, itatokea widow ambayo itakuwa na sehemu imeandikwa location, hiyo ndiyo itakuwa Phisical Adress ya website yako
Mimi kwangu imenionesha home/agent/Desktop kama unatumia Operating Systeme yoyote ya Linux jibu lako litakuwa kama langu, lakini kama ni OS tofauti basi jibu lako litakuwa tofauti.
3. Hatua ya mwisho ni kuunganisha neno file:/// na phisical location yako ambayo itakupa
file:///home/agent/Desktop .
Hapo tayari utakuwa umepata webadress yako ambayo unaweza kuitumia kwa sasa ambayo kwangu imekuwa ni, file:///home/agent/Desktop .
Ukitumia Adress hii unaweza kuaccess taarifa zote zilizopo kwenye website yako.
Hongera kwa mafanikio !
Unit- 4
Habari gani Developers, Alhamdulillah wiki hii tumefikia mahali pazuri na kufanikiwa kupata mwangaza wa kutosha kwenye teknologia hii.
Tayari tulipofikia hivi sasa kila mmoja wetu anatakiwa awe na uwezo wa kutengeneza website ambayo anaweza kuitembele kwenye browser yake. Hakikisha unaweza kufanya hivyo kabla ya kuendelea na sehemu inayofata, na kama unapata ugumu wowote basi usisite kuomba msaada kupitia darasa hili.
Katika hatua tuliyopo hivi sasa tuna website ambayo inamkusanyiko wa taarifa mbalimbali ambazo tunaweza kuzipata kupitia Web Browser. Hivi sasa unaweza kupitia mafile yote yaliyopo kwenye website yako kwa kubadili jina la file unalotaka kulitizama kwenye Web Adress yako.
Mfano mimi kwenye kompyuta ninayotumia hivi sasa Web Adress yangu ni
file:///C:\Users\Msamiati\Desktop\swdc
picha ya website ikionesha mafile manne
Nikifungua Web Adress hii itanifungulia website yangu na kunionesha mafile yote yaliyomo ndani yake. Endapo ninataka kutizama file lolote kutoka ndani ya website yangu, natakiwa kuongeza alama ya slash (/) na jina la file husika, cheza sana na kanuni hii na uifanyie mazoezi ya kutosha kwa madhumuni ya kujifunza. Njia mbadala ya kupitia mafile ni kubofya file husika.
Mpaka hapa tutakuwa tumemaliza kipengele cha kwanza ambacho ni msingi wa awali kabisa na imara wa teknolojia hizi za Website.
Kuelekea katika kipengele kinachofata inabidi tuchambue udhaifu wa website zetu zikiwa kama chanzo cha habari.
Udhibiti wa taarifa (Information management)
Moja kati ya shida kubwa na tatizo la msingi ambalo linaikabili website yako kwa sasa ni udhibiti wa taarifa. Kama unavyoona mtumiaji akipata tu Web Adress yako anaunganishwa na taarifa zote zilizomo ndani yake bila utaratibu wala mpangilio wowote.
Mtumiaji anaweza kujiamulia taarifa ya kwanza kuipitia na ya mwisho, wewe huna uwezo wa kumpangia, lakini shida nyingine inakuja pale unapotaka kumuonesha ujumbe wa muhimu kwani, mtumiaji anaweza kufunga website yako bila kufungua file lenye ujumbe husika.
Ukitizama vizuri matatizo haya mawili utagundua kuwa kimsingi yanasababishwa na tatizo la mafile yote kuwa wazi kwa mtumiaji, hiyo ndio sababu tunashindwa kumpangia mtumiaji mtiririko wa kupata taarifa na wakati mwingine hatutaweza hata kuzuia kabisa baadhi ya taarifa kuonekana kwa mtumiaji.
Tutaondoa tatizo hili kwa kuficha mafile yote nyuma ya file maalum.
Mwanzo Web Adress yetu ilikuwa file:///C:\Users\Msamiati\Desktop\swdc, na kupelekea mafail yote ndani ya website (folder) swdc kuwa wazi kwa mtumiaji, lakini hivi sasa itatulazimu kuandika web address yetu kama ifatavyo file:///C:\Users\Msamiati\Desktop\swdc\filemaalum.
Ukiangalia kwa makini utagundua kuwa Baada ya kuielekeza web address yetu ifungue swdc tumeielekeza moja kwa moja kwenye file maalum ambalo ni filemaalum. Zingatia, mwanzo ilikuwa ikifungua Website (folder) na sasa inafungua file lililopo ndani ya website, Hivyo basi muda wowote mtu akifungua website yako web browser itamfungulia website na itamuonesha moja kwa moja filemaalum.
Kielelezo kuonesha mafile yalivyo fichwa nyuma ya filemaalum
Hiki ambacho tumekiita hapa file maalum ndio kile kinachoitwa index file au default file kwenye ulimwengu wa teknolojia za website. Hatutatumia lugha hii ya kidigitali kwa sasa lakini itatulazimu kuhamia huko siku za mbeleni.
Ninachotaka tu kukusihi kwa sasa ni kukuomba upitie mara mbili mbili maelezo haya na uyaelewe vizuri kabisa. Hizi ni kama stori tu, usipasue kuchwa kukariri, kama unahisi au unaona kunakitu hukielewi na unalazimika kukariri, tafadhari usifanye hivyo, let me know nitakuelekeza katika mtindo wa peke yako mpaka utanielewa.
Mwisho nakuomba tena usisahau lengo na madhumuni ya sisi kuficha mafile yote nyuma ya filemaalum.
Nakutakia jumapili njema, Ahsante !
Unit- 5
Habari gani Developers from JF, tukiwa tunazidi kwenda mbele na kuchimba chini zaidi kwenye teknolojia hii, hivi sasa tumefanikiwa kuzuia uwezekano wa mtumiaji wa website kufungua taarifa yoyote anayoitaka yeye kiholela.
Sasa tunaweza kupanga ni taarifa gani ambazo mtumiaji wetu azipate punde tu anapofungua website na jambo hili limewezekana kwenye teknolojia kwa kufanya web adress tunayompatia mtumiaji ifungue filemaalum moja kwa moja.
Ok ! kwanza kabisa tukae tukifahamu kuwa awali website ilikuwa ikiwasilisha mafile ya aina zote nne, na mtumiaji alikuwa anaweza kufungua file lolote na kupata taarifa zilizopo ndani yake bila shida, lakini baada ya kuficha mafaili yote na kufanya webadress kufungua file maalum kati ya mafile yote, tatizo la msingi linakuja, je! mtumiaji atawezaje kupata taarifa zilizopo kwenye mafile mengine ? na kwakuwa tumeamua kufanya file maalumu liwe ni file la maandishi, vipi kuhusu mpangilio na muonekano wa maandishi tutakayoweka ndani yake ?
Matatizo haya kimsingi ndio chanzo cha kile ambacho pengine umewahi kukisikia kikijulikana kama HTML. Hapa nikiri tu kuwa nimepata wakati mgumu sana jinsi nitakavyoweza kukufafanulia juu ya HTML kwa kiwango ambacho mimi ninakitaka, lakini kwa kutumia mtindo uleule wa kuepuka elimu ambayo inakanganya na itakayokuwekea kizingiti cha uelewa bila sababu ya msingi twende kwa mtindo huu...
HTML ni kifupisho cha maneno ya kimombo yanayosomeka kama Hypertext Markup Language. HTML ni mtindo wa maandishi unaojumuisha alama na herufi ambao umepangwa katika viwango maalum ili kuleta maelewano baina ya Filemaalum na web Browser.
HTML ni lugha nyepesi kabisa inayotumika kujenga muonekano wa kuvutia na kuwezesha mpangilio nadhifu wa taarifa mbali mbali kwenye fileMaalum.
HTML ni maelekezo ambayo wewe kama developer unayatumia kuitaarifu web browser jinsi ya kuweka muonekano na mpangilio wa taarifa.
HTML ni lugha ya mawasiliano kati ya Web browser na Developer, ni lugha isiyotumiwa wala kutambulika na Mtumiaji wa website.
Ninapozungumzia muonekano (Contents View) nazungumzia vitu kama ukubwa wa maandishi na ujazo. Ninapozungumzia mpangilio (Contents Arangement) hapa nazungumzia utaratibu wa kupanga taarifa mbali mbali katika nafasi tofautitofauti kwenye fileMaalum.
Kuona jinsi HTML ilivyo lugha nyepesi hebu jaribu kuangalia mfano huu:
Fungua filemaalum kwenye website yako, hakikisha umelitengeneza file hilo kwa text editor ya kawaida ambayo mara nyingi inakuja na window unayoitumia.
Andika Kauli ya kwanza: "Mimi ni maandishi Dhaifu" halafu chini yake andika "mimi ni mandishi imara". ili uweze kuyapa uimara maandishi imara kwa kutumia HTML itabidi wewe kama developer utumie maneno code hii <b>. Hii ni code itakayoiambia web browser kuwa wakati inafungua maandishi haya basi iyafanye yawe na ujazo (Bold).
Kwenye filemaalum utaandika kama ifatavyo:
Ukiandika code hii kwenye filemaalum serve kisha fungua website yako kwenye web browser, kama umeandika kwa usahihi utaona majibu yafatayo.Code:[FONT=book antiqua][SIZE=3]"mimi ni maandishi dhaifu" <b>"Na mimi ni maandishi imara"</b>[/SIZE][/FONT]
Huu ni mfano tu, jinsi ambavyo HTML inaweza kufanya kazi, huna sababu ya kujifunza kitu chochote kutoka kwenye mfano huu. Jambo ambalo ninataka kukuhabarisha tu kwa sasa ni kwamba, kwa kuwa HTML ndio lugha mama inayotumika na iliyotumika kujenga muonekano na mpangilio wa takriban 99% ya website zote duniani ? sasa nafungua rasmi kurasa ya kucheza na lugha hii kwa marefu na mapana ili tujenge utaalamu zaidi wa kuwasilisha taarifa za kwenye website kwa watumiaji. sio kitu kigumu wala hakita chukuwa muda kukielewa na ndani ya muda usiotegemea utaweza kuwa website proffessional."mimi ni maandishi dhaifu"
"Na mimi ni maandishi imara"
Hapa web browser inakuwa imesoma mstari wa kwanza na kuona hakuna maelekezo yoyote hivyo inaonesha maneno ya kwanza kama yalivyo lakini inapofika kwenye mstari wa pili inaona maelekezo yanayoiambia iongeze ujazo kwenye maandishi husika, web browser inatumia utaalamu wake kuonesha maandishi hayo yakiwa na ujazo. Hapo Wewe kama developer unakuwa umetumia HTML kuwasiliana na web browser.
Kwa namna ya kipekee kabisa nitambue uwepo wa madeveloper wanaofatilia Kozi hii kama geofreyngaga na wengineo wengi, inanilazimu kwenda taratibu taratibu kutokana na kubanwa sana na shughuli nyingi za kikazi, na kwakuwa inanigharimu mpaka masaa matano kuandaa unity moja kama hii basi naomba muivumilie speed hii ndogo wakati najaribu kuweka mambo sawa.
Unit- 6
Utambulisho wa HTML
Tangu mwanzo wa kozi hii tumeona aina nne za mafile ya taarifa zinazopatikana ndani ya website ambazo ni mafile ya picha, video, audio na mafile ya maandishi. Baada ya kuwepo uhitaji wa file maalum tukalazimika kutumia file la maandishi kama file maalum.
Kwakuwa file hili ndilo litakalotumika ku wasilisha taarifa zote zilizomo ndani ya website kwa kutumia Lugha inayohusika na muonekano na mpangilio wa taarifa (HTML) katika filemaalum, filemaalum halitakuwa file la maandishi tena bali litakuwa ni aina ya file inayoitwa HTML.
Hii ni kwasababu file hili litaandaliwa na kutengenezwa kwa kutumia lugha hii ya HTML, ukizingatia kuwa file lote litakuwa na taarifa nyingi ambazo zitapewa muonekano na kupangwa katika utaratibu mzuri kwa kutumia Lugha hii. Kwa maneno ya kitaalamu file hili litaitwa HTML Document, au HTML file.
Matengenezo ya HTML Document/file
HTML Document hutengenezwa kawaida kabisa kama unavyotengeneza file lolote la maandishi, file hili linaweza kutengenezwa kwa kutumia text editor ya kawaida kabisa ambayo inakuja na window unayotumia, kwenye Windows unaweza kutumia Notepad.
Utatengeneza file jipya kwa kutumia Notepad kisha utasevu kwa kutumia jina lolote upendalo mwisho utaweka file extension ambayo ni dot html (.html)
Mfano: jina la file letu likiwa ni fileMaalum, basi Document ya HTML utaisevu kwa kuandika fileMaalum.html
Baada ya hapo document yako uliyoisevu inatakiwa ionekane na nembo (icon) ya web Browser unayotumia kwenye komputer yako (Default web browser).
Mpaka Hapo tayari filemaalum litakuwa ni HTML file. Hii itakuwa aina ya tano ya file ndani ya website yetu. Tulishaona file la sauti, tukaona file la picha, tukaona file la maandishi baadae file la video na sasa file la HTML.
Jambo la kuzingatia kabisa bila kusahau, File la HTML ni file la uwasilishaji wa website kwa mtumiaji na aina zilizobaki za mafile ni mafail ya taarifa. HTML sio file la taarifa bali linafanya kazi ya uwasilishaji tu (presentation file).
Nikirejea nyuma kidogo, tulihitaji file moja ambalo litakuwa mbele ya taarifa zote za kwenye website, tukalipa jina file hilo na kuliita fileMaalum. Lilipokuja swali kuwa fileMaalum liwe ni aina gani ya file ? HTML likawa jawabu lisilokuwa na mpinzani kwakuwa HTML ndio lugha pekee ambayo wewe Developer unaweza kuitumia kuielekeza web Browser muonekano na mpangilio wa taarifa za kwenye website yako.
Mpangilio na mwonekano wa takriban website zote duniani umefanyika kwa kutumia HTML, sasa tuanze kwa kuangalia sifa za ndani za HTML Document.
HTML document ikiwa mikononi mwako developer linakuwa na mjumuiko wa HTML cods na taarifa mbali mbali za maandishi.
Lakini likifika kwa mtumiaji Browser hulifungua na kutafsiri cod za HTML kisha humuonesha mtumiaji file likiwa halina Code yoyote ya HTML.
Mwisho nasisitiza kuwa HTML ni Mkataba wa Web Browser na Wewe developer. Kaa tayari kwa unity inayofata ambayo tutaanza kujifunza kuhusiana na misingi na matumizi ya HTML.
Unit- 7
Leo tutaanza kuchambua kwa undani muundo wa fileMaalum na jinsi linavyoweza kuandaliwa kwa kutumia code za HTML. Kwanza kabisa ikumbukwe kuwa fileMaalum ndio file ambalo mtumiaji akifungua website yako kwenye browser yake ataliona moja kwa moja. Hivyo basi, swala la unatdifu na mvuto wa file hili ni jambo lisilokuwa na mjadala.
Katika madarasa yaliyotangulia tulijifunza kuwa file maalum halitakiwi kuwa file la maandishi bali ni file aina ya HTML. Code za HTML zitatumika kuwasilisha taarifa zote ndani ya website kama nilivyoelekeza katika madarasa yaliyopita.
Sifa za HTML document ( FileMaalum )
Jambo pekee unalotakiwa kufahamu kuhusiana na File la HTML kwa sasa ni kwamba, file la HTML ambalo tumelipa jina la file maalum ambalo ndio file la kwanza kuonekana unapofungua website yoyote duniani, kila kitu unachokiona kwenye file hili, kila taarifa zikiwemo picha, video, audio, link na kila kitu utakacho kiona juu ya file hili hujulikana kama Element. kitu chochote unachoongeza kwenye website kwa sasa utakiongeza kama element.
Kama ukielewa vizuri jinsi unavyoweza kuongeza na kupanga element kwenye filemaalum (HTML file) hapo utakuwa umemaliza kila kitu kuhusiana na HTML.
Muundo wa element
Hiki ni kipengele cha muhimu na cha kuzingatia zaidi kwenye darasa hili,
Element huundwa na kitu ambacho kiteknolojia tunakiita TAG , Tag ni kipande kifupi sana cha taarifa kinachotoa tafsiri ya mabadiliko ya tabia, muonekano au sifa.
Muundo wa Tag:
Tag huundwa kwa kutumia alama ya ndogo kuliko (<) na alama ya kubwa kuliko (>) huku kati kati kukiwa na herufi au neno maalum.
Hivyo kufanya Tag kuonekana hivi, <line> Au <b> Au <li>.
Aina za Tag
Kuna aina mbili za Tag. (a) Tag mfatano (b)Tag pekee. {Hii ni tafsiri yangu}
(a)Tag mfatano
Hii ni aina ya tag ambayo hutokea mara mbili ili kukamilisha element, tag hii huwa na tag kianzio (Opening tag) na tag tamati (closing tag). Asilimia kubwa ya tags kwenye HTML ni aina hii ya Tag, Tag Mfatano.
Tag Mfatano huonekana kama hivi, <opening tag> taarifa</closing tag>. Katika tag mfatano, tag tamati (closing tag) lazima iwe na alama ya (/), Kama unavyoweza kuangalia hapa </closing tag> .
(b)Tag pekee
Hii ni aina ya tag ambayo haihitaji tag tamati ili kujikamilisha, tag za aina hii zipo chache kwenye HTML na mfano mzuri wa aina hii ya tag ni anchor tag inayotumika kutengeneza link, tag hii huandikwa hivi <a>. hapo anchor inakuwa imekamilika bila tag tamati (closing tag).
Muundo wa element (final)
Baada ya kujifunza kuhusiana na tag na kelewa muundo wake, sasa tunaposema element huundwa na Tag tunamaana kuwa element huwa na muundo ufatao.
<tag> content </tag>Au kama element itaongezwa kwenye page kwa kutumia tag pekee itakuwa na muonekano huu
<tag>Naomba nikamilishe kwa kuishia hapa naamini kama kwa hatua ya awali kabisa umeanzia hapa kwenye ulimwengu huu wa teknolojia za website. basi bila shaka utakuwa na maswali mengi sana kufikia hapa. Natarajia maswali ya kutosha pale usioelewa na mimi nitakuelekeza kwa njia nyingine rahisi zaidi mapaka utaelewa,
Hakikisha unaelewa na sio kumeza.
Msingi na sehemu kubwa wa html imeishia hapa, huu ndio umuhimu wa kipengele hiki, hivyo hakikisha kuwa umekielewa vizuri kabisa. Kuanzia darasa lijalo utakuwa ni mwendo wa kupiga code huku tukichambua Tag mbalimbali zinavyofanya maajabu kwenye Kurasa za HTML.
Mchana mwema.
Unit- 8
Kwenye Hatua inayofata wiki hii moja kwa moja tunaenda kujifunza jinsi ya kutumia HTML kupangilia taarifa kwenye file maalum (HTML Document).
Tumejifunza kuwa browser inasoma code za HTML na kufata maelekezo kama jinsi itakavyokuwa imeandikwa na Developer. Lakini kwakuwa kwenye website kunakuwa na mafile ya aina mbali mbali ambayo yanakuwa na lugha tofauti fofauti, basi kwenye HTML Document (File Maalum) tunalazimika kutumia tag Maalum mwanzoni kabisa mwa File, ili web Browser iweze kutambua kuwa File husika limeandikwa kwa kutumia HTML.
Hapa tutatumia tag fupi ifatayo:
<!DOCTYPE html>
Browser inapokutana na code hii mwanzo wa page, moja kwa moja inatambua kuwa page husika imebeba taarifa ambazo zimepangiliwa kwa kutumia lugha ya HTML, hivyo browser itasoma na kuwasilisha taarifa kwa viwango vya HTML (HTML Standards).
Kumbuka unachohitaji wewe ni kuweka taarifa zako kwenye filemalum katika mpangilio nadhifu kwa kutumia element, rejea tulichojifunza awali kuwa chochote kinachoonekana kwenye web browser unapofungua website yoyote duniani ni element.
Kabla ya kuongeza element yoyote kwenye website yako kinachotangulia ni element mama (Element kuu), Hii ni element maalum ambayo itakusanya element zote ndani yake.
Element Hii huandikwa kama hivi:
<html> </html>
Sehemu ya kati kati ya element hii, ndiyo itakayo beba element zako zote utakazotaka kuongeza kwenye website yako.
<html> //Element zote utaziweka hapa </html>
<html> element hii ni kama boksi kubwa ambalo linabeba bidhaa ndani yake ambazo ni element zote unazotaka kuongeza kwenye website yako.
Unaweza kuongeza element sasa ? jibu ni Hapana, kunakitu kimoja cha kufanya kabla ya kukuonesha jinsi ya kuanza kuongeza element zako wenye file maalum. Tuongeze element mbili tu za mwisho kwa sasa baada ya hapo utakuwa ni ukumbi wako wa kupangilia na kupamba muonekano wa file maalum.
Element ya kwanza ambayo tutaiongeza ni element ambayo itafanya kazi ya kushikiria taarifa za page (utangulizi wa page), element hii huitwa <head> na huonekana kama ifatavyo:
<head> </head>
Element hii itakusanya jina la page pamoja na taarifa zingine za page ambazo hatuhitaji zionekane kwa mtumiaji.
Element ya mwisho ni element ya kipekee kabisa ambayo hukusanya element zote zinazo beba taarifa unazotaka zionekane kwa mtumiaji wa website yetu. Hii ni <body>.
<body> </body>
Kila kitu kinachoonekana ndani ya website lazima kiwe ndani ya element hii, kwa mantiki hiyo ndani ya kipindi chote cha kozi hii tutatengeneza element nyingi zaidi ndani ya element hii.
Ili kukupa uwelewa rahisi, kwenye maelekezo haya naweza kukuchambulia kama ifatavyo,
Hatua ya kwanza weka element itakayosaidia web browser kutambua lugha iliyotumika kutengenezea Document husika.
<!DOCTYPE html>
Hatua ya pili weka element Kuu: <html> element zote ziwekwe hapa </html>
Hatua ya tatu weka weka element ya taarifa muhimu za page: <head> </head>
Hatua ya nne, weka element mahususi ambayo itakusanya element zote unazohitaji zionekane kwa mtumiaji.<body> </body>.
Ukipangilia vizuri mtiririko wako unatakiwa uonekane kama hivi:
Code:<!DOCTYPE html> <html> //tag kianzio cha element kuu <head> //weka taariffa za website hapa </head> <body> //element zote zitengenezee hapa </body> </html> //tag tamati cha element kuu
Ukifanikiwa kuielewa hatua hii basi huna budi kujipongeza kwani utakuwa umepiga hatua mwanana kuelekea kwenye kilele cha teknolojia ya utengenezaji wa website.
Unit- 9
Baada ya kujifunza Muundo mkuu wa fileMaalum (HTML Page Basic structure), wiki hii tunaenda moja kwa moja kuanza kuongeza element kwenye page yetu, hakikisha kabla ya kuendelea na darasa la wiki hii, tayari umeelewa vizuri kabisa kuhusiana na vitu vifatavyo:
1.Website ni kitu gani ?
2.Web Adress ni nini?
3.Web page ni nini?
4.Kazi ya website
5.HTML Ni nini?
6. Element Ni nini
7. HTML Tag ni kitu gani ?
8.Aina za element
9.Aina za Tag
10.Muundo mkuu wa HTML document
Vizuri Developer ! kama umefanikiwa kuelewa vizuri vitu kumi nilivyo orodhesha hapa juu sasa upo tayari kuingia kwenye kipengele kifatacho.
Kuongeza Taarifa kwenye HTML Page
Kama Ukipitia vizuri mada inayohusiana na muundo wa HTML Page kwenye Unity 8, utakuwa umeelewa kuwa taarifa zote tutakazotaka kuzionesha kwenye fileMaalum, tutaziongeza ndani ya element inayoitwa body, <body>.
Kama zilivyo element zingine, body huundwa na Tag mbili, tag kianzio, <body> na tag tamati, </body>. Kati kati ya tag hizi mbili ndio tutaweka element zote zinazobeba taarifa tutakazo zionesha kwa mtumiaji wetu, na hivi ndivyo website zote duniani zilivyotengenezwa.
Kwa kuanza leo tutafanya vitu viwili, kwanza ni kuweka element moja kwenye fileMaalum, kisha tutaweka kichwa/jina la kurasa yetu.
Jina la kurasa (Page title)
Jina la kurasa ni neno linalotumika kutambulisha kurasa(fileMaalum). Jina la kurasa litaonekana juu kabisa kwenye tab ya web browser kama inavyoonekana kwenye kielelezo hapa chini.
View attachment 205305
Kielelezo hiki kinaonesha jina la kurasa kwenye website ya Jamiiforums ambalo ni JamiiForums- The Home of Great Thinkers, kwenye website nyingi duniani sehemu ya jina la kurasa huandikwa jina la Website na kauli mbiu yake kama inavyoonekana kwenye mtandao wa Jamiiforums licha ya kwamba jina hilo linaweza kubadilika katika kila page.
Kuongeza jina la website kwenye PageMaalum
Kama kawaida, jina la kurasa kwenye website yetu litaongezwa kama element mpya. Kabla ya yote inabidi tutafakari mahali panapofaa kuweka element hii, kwenye teknolojia ya website element ya jina la page huwekwa ndani ya element tuliyojifunza awali inayoitwa <head>.
Tunaiweka element ya jina la page hapa, kwa kuwa tulishajifunza kwamba ndani ya element hii ya <head> ndipo tutaweka taarifa mbali mbali zinazohusiana na fileMaalum ikiwemo jina la kurasa.
Jina la kurasa tutaliita SWDC Website – Home. Na kuongeza jina hili tunatumia Element tag ambayo ni <title>. Hii itafanya code yetu ionekane kama ifatavyo.
Code:[FONT=book antiqua][SIZE=3]<!DOCTYPE html> <html> <head> [B]<title> [/B]SWDC Website – Home[B] </title> [/B] </head> <body> </body> </html> [/SIZE][/FONT]
Kama inavyoona kwenye code hizi, jina la kurasa tumelitengeneza kama element, <title> SWDC Website – Home </title>. Element hii tumeiweka ndani ya element nyingine ambayo ni <head> </head>. Sevu kurasa yako kisha ijaribu kuona matokeo yake.
Kitu cha mwisho leo nitaonesha jinsi ya kuongeza element kwenye kurasa yenyewe, Hapa utapata mfano rahisi kabisa wa jinsi tutakavyo ongeza Element zenye taarifa tunazotaka mtumiaji wa website azipate.
Zingatia kuwa, kila kinachoonekana mbele ya website kimeongezwa kama element kwa kuwekwa ndani ya element inayoitwa <body>. Hapo namaanisha kuwa, mpaka mwisho wa kozi hii, kwa sehemu kubwa tutacheza ndani ya element hii.
Sasa tutaongeza ujumbe wenye maneno yanayo sema, "Karibu! Hii ni Swahili web Development Course" tutatumia tag hii, <h1>, Hii tag hutumika kutengeneza kichwa cha habari kwa kukiongezea ujazo. ukitengeneza element hii na kuiongeza code zako sasa zitaonekana kama ifatavyo.
Code:[FONT=book antiqua][SIZE=3]<!DOCTYPE html> <html> <head> [B]<title> [/B]SWDC Website – Home[B] </title> [/B] </head> <body> [B]<h1>[/B][I] Karibu! Hii ni Swahili web Development Course[/I] [B]</h1>[/B] </body> </html> [/SIZE][/FONT]
Unit- 10
Tukiwa tunaelekea kwenye hatua ya kitaaluma zaidi, leo tujifunze viwango vya ubora katika uandishi wa HTML WebPage.
Viwango vya ubora katika uandishi wa Kod za HTML
Ukiwa kama web developer, mara nyingi utataka kufanya mapitio kwenye website yako ili uweze kufanya maboresho au marekebisho mbalimbali ya website. Unapokuwa unafanya mapitio hayo, urahisi wa usomekaji wa kodi zako ni kitu pekee kitakacho kupa ubora wa mapitio yako, kwa maana ya kasi na usahihi wa kile unachokifanya.
Kwa maana hiyo basi, Web Developer unapokuwa unaandika kodi zako lazima uhakikishe unaandika katika mpangilio mzuri ambao utakurahisishia kazi muda wowote ukitaka kufanya mapitio ya code zako. Hii pia itarahisisha kazi hata kama Developer Mwingine atatakiwa kuja kufanya maboresho au marekebisho ya kazi yako.
Katika kusimamia jambo hili Teknolojia hii imeweka baadhi ya viwango vya kusimamia Ubora wa uandishi wa Code.
Indentation
Baadhi ya viwango hivyo ni kama vile utaratibu ambao unajulikana kwa lugha ya kigeni kama Indentation. Indentation ni utaratibu unaotumika kuonesha mpangilio wa element huku ukisaidia kuonesha element zote ambazo zipo ndani ya element kuu.
Katika viwango vya ubora wa uandishi wa code za HTML, Baada ya kuandika element kuu Developer unatakiwa kuruka umbali Fulani ili uweze kuongeza element ndani ya element kuu.
Mfano:
Code:[FONT=book antiqua][SIZE=4][B] <html>[/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B]</html> [/B][/SIZE][/FONT]
Hii ndio element kuu. Kama unataka kuongeza element ndani ya element hii, basi utatakiwa kuruka nafasi kidogo kwenda ndani. Tazama Code Hizi nilizo ongeza element mbili ndani yake.
Code:[FONT=book antiqua][SIZE=4][B] <html>[/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B]<h1> [/B]Mimi ni Element Ndogo ya ndani[B] </h1> [/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B]<h2> [/B]Hata mimi ni element Ndogo ya ndani[B] </h2>[/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B]</html> [/B][/SIZE][/FONT]
Mfumo huu ni rahisi sana. Hata kama utahitaji kuongeza element nyingine ndani ya element ndogo ya ndani, basi utatakiwa kuacha nafasi nyingine. Mfano:
Code:[SIZE=4][FONT=book antiqua] <html> [/FONT][/SIZE] [SIZE=4][FONT=book antiqua] [COLOR=#984806]<head> [/COLOR][/FONT][/SIZE] [SIZE=4][FONT=book antiqua][B][COLOR=#00B050]<title> [/COLOR][/B][COLOR=#00B050]SWDC Website – Home[B] </title>[/B][/COLOR][/FONT][/SIZE] [SIZE=4][FONT=book antiqua][COLOR=#984806] </head> [/COLOR][/FONT][/SIZE] [SIZE=4][FONT=book antiqua]</html> [/FONT][/SIZE]
Ukiangalia mfano huu utaona kuwa element mama katika kod hii ni <html>, lakini ndani yake kuna element nyingine inayoitwa <head>, kwakuwa head ni element mpya ndani ya element mama, <html>, Basi element head imekuwa indented(imefanyiwa indentation kwa kuingizwa ndani kidogo).
Kwenye element head kuna element nyingine ndani yake ambayo ni <title>, kama kawaida element <title> pia imeingizwa ndani ili kukidhi viwango vya ubora wa uandishi wa HTML code (HTML coding Standards).
Hatakama element <title> ingekuwa na element nyingine ndani yake basi tunge andika element hiyo kwa ku-indent kama kawaida.
Zingatia:
Element ambazo zipo ndani ya element kuu moja huwezi kuzi-Indent kwa umbali tofauti, mfano indentation ifatayo siyo sahihi.
Code:[FONT=book antiqua][SIZE=4][B]<html> [/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B] <h1> Mimi ni Element Ndogo ya ndani </h1> [/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B] [COLOR=red]<h2> Hata mimi ni element Ndogo ya ndani </h2>[/COLOR][/B][/SIZE][/FONT] [FONT=book antiqua][SIZE=4][B]</html> [/B][/SIZE][/FONT]
Matumizi ya Herufi kubwa (Capitalization)
Kiwango kingine cha ubora wa HTML code ni Matumizi sahihi ya Herufi kubwa. Zingatia kuwa Mara zote andika tags zako kwa herufi ndogo tu. Mfano Tag zinazoandikwa hivi hazikidhi Viwango,
<TITLE> Maelezo ya title </TITLE>.
Nafasi kwenye kodi
Kuacha nafasi kwenye kodi (White Space), pia ni kinyume na uandishi unaozingatia viwango vya ubora. Ni vema kuepuka kuacha nafasi bila sababu ya msingi kwenye code zako.
Nilivyo orodhesha kwenye darasa la leo ni viwango vya ubora vya msingi katika uandishi, kadri tutakavyokuwa tunaendelea mbele tutajifunza viwango vingi zaidi na kanuni bora za uandishi zinazo zingatia Teknolojia iliyopo.
Kwa kawaida hivi ni vitu vya msingi kabisa vinavyokupa hadhi wewe kama developer, Developer mzuri ni Yule anayeandika code zinazosomeka na kueleweka kwa urahisi na developer yoyote mwingine.
Unaweza kumtambua mtu asiyekuwa na utaalamu wa uandishi wa website akiandika line mbili tu za code, kutokana na kukosa baadhi ya sifa za kitaalam kama hizi, kwahiyo nikusihi kufanyia mazoezi na kuifunza vitu hivi kwa jitihada kubwa mpaka utakapokuwa umevielewa kabisa.
Unit- 11
Kufikia katika Unity 10 ya kozi hii, tayari utakuwa umepata ujuzi wa msingi na wa muhimu kabisa unaohitajika katika utengenezaji wa website yoyote ile ya kisasa.
Katika hatua inayofata ya kozi hii, tutaenda kujifunza matumizi ya tags mbali mbali katika kuongeza taarifa kwenye file maalum.
Kumbuka kuwa file ambalo tunalionesha kwa mtumiaji wetu ndio hili linaloitwa file maalum ambalo ni file aina ya HTML. Katika teknolojia za website, sura ya file hili ndio hujulikana kama Web Page.
TAGS ZA MSINGI
Ndani ya kipengele hiki nitafundisha tags za msingi, tags ambazo mara nyingi hutumika zaidi na madeveloper katika matengenezo ya websites.
Ukiwa kama Developer huna haja hata kidogo ya kukariri tag hizi, bali utahitaji kuzifanyia mazoezi ya kutosha na ndani ya kipindi kifupi tu utakuwa umezielewa tag zote kiasi cha kuziandika kama unavyoweza kuandika maneno ya lugha ya Kiswahili.
Hatua hii itakugharimu muda wako tu wa kufanya mazoezi ya kutosha.
Tag za Kichwa cha Habari (Heading)
Tag za kichwa cha habari, ni tag ambazo hutumika katika kutengeneza maandishi yanayotumika kama kichwa cha habari katika website.
Kielelezo kuonesha vichwa vya habari kwenye website ya mwananchi
Kwenye Teknolojia ya website tuna aina kuu 3 za vichwa vya habari, ambazo ni kichwa kikuu, kichwa cha wastan na kichwa kidogo.
Tag ambayo hutumika kutengenezea kichwa cha habari ni <h>. Ili kutengeneza kichwa kikuu utatumia namba moja kwenye tag na kufanya tag yako iandikwe kama hivi, <h1>.
Ili kutengeneza kichwa cha wastan tag yako itakuwa na namba mbili kama hivi, <h2> . Na ukitaka kutengeneza kichwa kidogo utatumia namba tatu kwenye tag <h3>.
Mfano ufatao unaongeza vichwa vyote ndani ya website yetu:
Kama kawaida element zote zinazobeba taarifa tunazotaka kuzionesha kwa mtumiaji wetu tunaziweka kwenye Body <body>.
Code:[SIZE=4]<!DOCTYPE html> <html> <head> [B]<title> [/B]SWDC Website – Home[B] </title> [/B] </head> <body> <h1> Mafunzo ya Kiswahili ya utengenezaji website</h1> <h2> Taaluma ya bure imetolewa kwa kila mtu </h2> <h3> Jipatie ujuzi huu kupitia mtandao wa JamiiForums</h3> </body> </html>[/SIZE]
Ukiandika kwa makini code hizi zitakuonesha tofauti ya kimuonekano baina ya vichwa vya habari kwenye website yako.
Note: Unaweza kupata size ndogo zaidi za Vichwa vya habari kwa kutumia namba 4, 5 na 6. Namba 7 na kuendelea zitakupa maandishi ya kawaida.
Unit- 12
Vipambizo (Attributes)
Kukamilisha wiki hii ya kwanza ya mwezi huu wa kumi na mbili leo tutajifunza kitu muhimu kabisa katika ulimwengu wa teknolojia ya utengenezaji wa website. Kitu hicho tunaweza kukiita kipambizo kwa tafsiri isiyokuwa rasmi au kwa lugha ya kitaalam huitwa attribute.
kipambizo au attribute hutumika kuongeza sifa za ziada kwenye element. Tafsiri ya kipambizo inaweza kuleta maana zaidi, kwakuwa pambo lolote hutumika katika kuongeza sifa ya ziada kwenye kitu. Mfano pambo linaweza kuongeza sifa ya urefu, rang nk, vivyo hivyo vipambizo(attribute) kwenye HTML hutumika kuongeza sifa za ziada au kupunguza sifa kwenye element.
Kipambizo humuwezesha developer kuipa element sifa za muonekano kama vile rangi, ukubwa na mkao. Mbali na sifa za muonekano pia vipambizo hutumika katika kuipa element thamani, mathalani unapotaka kutengeneza element ambayo ni link, vipambizo hutumika kuongeza address kwenye element na kuifanya link iwe hai.
Sifa za Vipambizo(Attributes)
Kadri tutakavyozidi kujifunza tutazidi kuelewa vizuri zaidi sifa na vigezo vya uandishi bora wa vipambizo. Lakini kwa sasa tuangalie baadhi ya tabia na sifa za muhimu za vipambizo.
Sifa ya kwanza nikwamba, kwenye element vipambizo huwekwa kwenye tag kianzio tu! (hutakiwi hata siku moja kuongeza kipambizo kwenye tag tamati).
Sifa ya pili element moja inaweza kuwa na zaidi ya kipambizo kimoja, ukizingatia kuwa element moja inaweza kuhitaji kuongezewa zaidi ya sifa(kipambizo kimoja).
Vipambizo vyote vimesha pangiliwa kwenye viwango hivyo si jukumu la developer kuunda(kubuni) vipambizo vipya. Kila sifa utakayotaka kuiongezea element yako basi kipambizo chake tayari kimesha tengwa, kazi ya developer ni kukifahamu na kukitumia.
Tag pekee nyingi huambatana na vipambizo mbali mbali.
Muundo wa Vipambizo(Attributes)
Vipambizo huundwa na vitu viwili tu.
(a)Sifa – tunapo zungumzia sifa hapa tunazungumzia kile unachotaka kuongeza kwenye element. Mathalan unataka kuongeza kichwa(title), basi sifa yako itakuwa , title, au kama unataka kuongeza ukubwa, basi sifa yako itakuwa size.
Maneno yote yanayoweza kutumika kama sifa tayari yamepangiliwa katika viwango maalum, Developer huwezi kubuni au kutengeneza neno jipya utakalolitumia kama sifa.
Rejea katika madarasa ya awali tulishajifunza kuwa HTML ni Lugha ya mkataba baina yako na web Browser. Vigezo na viwango vya lugha hii hupangwa na Baraza maalum la kimataifa linaloitwa W3C (The World Wide Web Consortium).
Baada ya w3c kupanga vigezo hivyo lugha hii hutumika kwenye matengenezo ya browser na baadae kuwafundisha madeveloper, hivyo vitu vingi vilivyopangwa kwenye viwango haviwezi kubadilishwa na developer.
(b)Thamani- Baada ya sifa kitu kingine kinachounda pambizo ni thamani, thamani ndio neno unaloongeza ili kuongeza sifa husika kwenye element. Tofauti na Sifa, thamani inayotakiwa kuwekwa kwenye kipambizo ni uamuzi wa developer.
Mfano unapotaka kuongeza sifa ya rangi, kwenye maandishi utatumia neno color, Lakini kusema color peke yake hakuta fanya mabadiliko yoyote bila kuongeza thamani ya rangi unayoitaka, hivyo basi utalazimika kuongeza jina la rangi yoyote uipendayo ili kukamilisha kipambizo.
Muungano wa sifa na Thamani
Taswira ya kawaida kabisa hutumika kuandika code ya kipambizo kama ifatavyo:
sifa = thamani
title=html class
Lakini kutokana na viwango vya ubora vililyowekwa na w3c thamani inatakiwa kuandikwa ndani ya alama za fungua semi na funga semi " ". Hivyo kufanya kipambizo kuonekana kama ifatavyo:
sifa="thamani"
title="html class"
Hapo unakuwa umeandika kipambizo chenye viwango vya ubora.
Kuongeza kipambizo kwenye element
Kanuni zinatuonesha kuwa kipambizo huongezwa ndani ya tag awali, ili kuonesha mfano tutatumia tag <p>. Hii ni tag ambayo hutumika kutengeneza paragraph, tutatumia tag hii kuoneshea mfano jinsi kipambizo kinavyoweza kuongezwa kwenye element kama ifatavyo.
Code:<p> [FONT=book antiqua][COLOR=#3366FF][I]"Darasa la mafunzo ya utengenezaji website linaendeshwa katika mtandao wa jamiiForum na channel ya youtube, Endelea kufatilia mafunzo haya ya taaluma ya bure"[/I][/COLOR][/FONT] </p>
Tukiongeza kipambizo kwenye code hizi zitaonekana kama ifatavyo:
Code:[SIZE=4] <p title="utangulizi wa kozi"> [COLOR=#3366ff][FONT=book antiqua][I]"Darasa la mafunzo ya utengenezaji website linaendeshwa katika mtandao wa jamiiForum na channel ya youtube, Endelea kufatilia mafunzo haya ya taaluma ya bure"[/I][/FONT][/COLOR] </p> [/SIZE]
Kwenye mfano huu neno title Limetumika kama sifa na maneno utangulizi wa kozi yametumika kama thamani. Tumalizie kwa kujumuisha code hizi kwenye webpage yetu kama hivi.
Code:[SIZE=4] <!DOCTYPE html> <html> <head> [B]<title> [/B]SWDC Website – Home[B] </title>[/B] </head> <body> <p title=[FONT=book antiqua]"utangulizi wa cozi">[COLOR=#3366FF] [I] "Darasa la mafunzo ya utengenezaji website linaendeshwa katika mtandao wa jamiiForum na channel ya youtube, Endelea kufatilia mafunzo haya ya taaluma ya bure"[/I][/COLOR][/FONT] </p> </body> </html> [/SIZE]
UNITS OVERVIEW
.
Rafiki kinene, kwenye kujibu swali lako naomba nifanye review fupi ya unit zote tulizopitia kabla ya kuendelea na sehemu iliyobaki.
Unit 1: Tulifanya utangulizi rahisi kabisa na tukajifunza kuwa website ni mahali penye mkusanyiko wa mafail maalum ya taarifa yaliyotunzwa na kusambazwa katika viwango rasmi (technology standards). Tukajifunza aina za mafile zinazoweza kupatikana ndani ya website na baadae tukaona baadhi ya mifano ya mafile.
Unit 2: Hapa tulianza kwa kujifunza mazingira yanayotakiwa ili kujenga website. Tukaona kuwa kitu cha kwanza ni mahali ambapo website yetu itatunzwa, ukizingatia kuwa website yetu ni mafaili tu ya taarifa ambayo yatatakiwa kupata mahali pa kuyahifadhi na yakawa tayari kwaajili ya kusambazwa kwa watumiaji.
Hapo tukajifunza kuhusu chanzo, mahali ambapo tutahifadhi website yetu. Sasa kukamilisha jibu la swali ambalo nimekuwa nikiulizwa mara nyingi, mafaili ya kidigitali (Digital files) kwa maelezo rahisi yanaweza kutunzwa kwenye vitunzo vyovyote vya kidigitali kama vile flash, CD, hard disk N.k. Hivyo basi ili kuweka kasi na uhakika kwenye usambazaji wa mafaili yetu (Website) tunalazimika kutumia Hard disk kama chanzo au mahali pa kutunzia website yetu.
Hapa ndipo tulipo amua kutengeneza folder maalum kwenye komputa ambalo linatupa nafasi ya kuweka mafaili ya taarifa. Kwa ufafanuzi huu, folder hili ndio linakuwa website yenyewe ukizingatia tafsiri kuwa website ni mahali, eneo au nafasi au ukumbi au uwanya au ....
Naamini swali hili halitajirudia.
Kwenye Unit 2 pia tukajifunza kuhusu web browser, software maalum inayotumika kuperuzi taarifa zilizomo ndani ya website, mwisho tukamalizia unit kwa kupitia mfumo wa usafirishaji taarifa zilizomo ndani ya website kutoka kwenye chanzo mpaka kwenye web browser ya mtumiaji.
Unity 3: Ulikuwa kama muendelezo wa unity one lakini tukajikita zaidi kwenye kitu kipya ambacho ni Web Adress, hapa tukajifunza kuwa web adress ni sentensi inayoonesha mahali ambapo website imehifadhiwa, kwa maelezo mazuri ya web adress rudia unit 3
Unity 4 mpaka 5: Tukaanza kujifunza muundo wa mafaili yaliyopo ndani ya website.
Unit 6 mpaka 12: Hapa tukawa tumeanza kuchimba kwa undani utaalamu wa kiteknolojia wa utengenezaji wa mafail ya taarifa yanayokuwa ndani ya website, pia tukaanza kufukua utaalamu wa utumia lugha ya HTML kwenye upangaji na uwasilishaji wa mafile.
Sasa kaeni mkao wa kula tayari kwa ajili ya kumalizia Kozi hii
New Updates: Tar 01/03/2015
Unit- 13: Paragraph na Kipambizo cha mitindo (Style Attribute).
Kwa kuwa sehemu kubwa ya uwasilishaji wa taarifa kwenye file maalumu utabebwa na maandishi, ni vizuri sasa tukajifunza matumizi ya element maalum za paragraph zitakazosaidia kuboresha muonekano wa maandishi katika mpangilio nadhifu.
Tag inayotumika kutengeneza Paragraph ni tag <p>, hii ni tag Mfatano hivyo itahitaji tag tamati ili iweze kukamilika na kuifanya ionekane kama ifatavyo:
Code:[SIZE=3][B]<p>[/B] [I][SIZE=2]Hii ni paragraph iliyotengenezwa kwa HTML, na hivi ndivyo inavyoonekana kwenye browser yako. Endelea kufatilia na kujifunza mengi kutoka katika darasa hili maalum la teknolojia ya utengenezaji wa website[/SIZE][/I][B]</p>[/B] [/SIZE]
Sifa za Paragraph element
Element hii inapotumika inahakikisha maandishi yanakuwa katika mpangilio wa viwango vinavyotakiwa kwa kuhakikisha inaondoa nafasi za ziada zilizorukwa pamoja na kuunganisha sentensi zote ndani ya element kwenye line moja.
Mfano: Element hii inamaneno ambayo yameandikwa kwenye mistari miwili.
Code:[B]<p>[/B][I][SIZE=2]Hii ni paragraph yenye maneno yanayo eleweka lakini ya [/SIZE][/I] [I][SIZE=2]mewekwa kwenye mistari miwili bila mpangilio[/SIZE][/I].[B]</p>[/B]
Ukitumia element hii kwenye browser itatokea kama hivi:
Hii ni paragraph yenye maneno yanayo eleweka lakini ya mewekwa kwenye mistari miwili bila mpangilio.
Element ya paragraph automatic inaondoa nafasi zote zilizo zidi kati ya neno na neno na kuunganisha mistari yote kwenye mstari mmoja mpaka ujae kabla ya kuanza mstari mwingine.
Kama Developer utataka sentensi yako iwe na mistari miwili, basi utatumia tag maalum inayoitwa standard breack <br>
Mfano: Hii ni paragraph yenye maneno yanayo eleweka lakini ya mewekwa kwenye mistari miwili bila mpangilio.
Code:[SIZE=3][I][SIZE=2]Hii ni paragraph yenye maneno yanayo eleweka.[B]<br>[/B]Lakini ya mewekwa kwenye mistari miwili bila mpangilio[/SIZE][/I].[/SIZE]
Element hii itafanya maneno yaonekane kama hivi:
Hii ni paragraph yenye maneno yanayo eleweka.
Lakini ya mewekwa kwenye mistari miwili bila mpangilio.
Kipambizo cha mitindo (Style Attribute).
Kama tulivyojifunza kuhusu vipambizo, kipambizo cha mitindo ni kipambizo maalumu kinachoongezwa kwenye element ili kuipa element mtindo wa kimuonekano na umbo.
Kipambizo hiki huweza kubadili ukubwa wa maandishi au rangi ya maandishi na rangi ya ukuta wa nyuma wa maandishi.
Kwa kawaida element yoyote inapotengenezwa huwa na style rasmi ambayo size ya maandishi ni 12px, rangi ya maandishi huwa nyeusi na ukuta wa nyuma wa maandishi rangi nyeupe.
Matumizi ya Kipambizo cha mitindo (Style Attribute).
Kipambizo cha mitindo kama tulivyoona kwenye vipambizo vingine huweza kutumiwa kwa kukiongeza kwenye element ndani ya tag awali.
Kipambizo cha mitindo huanza kwa kuandika neno Style Kisha inafatiwa na alama ya sawa sawa (=) halafu unaongeza sifa unazotaka kuongezea.
Mfano: Style="sifa: Thamani". Sehemu ya sifa unaweza kuweka moja kati ya sifa zifatazo;
Sifa ya rangi ya maandishi- Utatumia neno font-color
Sifa ya rangi ya nyuma- Utatumia neno background-color
Sifa ya Ukubwa wa maandishi- Utatumia neno font-size
Sehemu ya thamani ni sehemu ambayo wewe kama developer utaweka thamani yoyote kulingana na mahitaji yako. Mfano unaweza kutumia thamani kama blue, red au green kwaajili ya kubadili rangi.
Kubadili size unaweza kutumia namba yoyote pia kutokana na mahitaji yako, na kipimo cha ukubwa tutakachotumia kwa sasa ni pixels ambayo inawakilishwa na alama px.
Kwahiyo unapotaka kuipa ilement size utaandika size unayotaka na alama ya px mbele ili kuonesha kuwa namba husika ni kipimo.
Sifa zote huongezwa kwenye attribute moja ya style kwenye kila element, tunatakiwa kutumia alama ya semicolon kutenganisha sifa moja na nyengine kama hivi:
Style="sifa:thamani; sifa:thamani; sifa:thamani;" na bado unaweza kuongeza sifa nyingi kadri uwezavyo.
Mfano ufatao unaonesha matumizi ya kipambizo cha mitindo.
Code:[SIZE=4]<!DOCTYPE html> <html> <head> [B]<title> [/B]SWDC Website – Home[B] </title>[/B] </head> <body> <p title=[FONT=book antiqua]"utangulizi wa cozi">[COLOR=#3366FF] [/COLOR][/FONT][/SIZE] [B]<h1 style="font-size:36; color:green; background-color:grey;">[/B][I]Darasa la mafunzo ya utengenezaji website linaendeshwa katika mtandao wa jamiiForum na channel ya youtube, Endelea kufatilia mafunzo haya ya taaluma ya bure[/I][B]</h1>[/B][SIZE=4] </p> </body> </html> [/SIZE]
***
Units Auto Review Element ndani element, Viwango vya mpangilio na Indentation
Sehemu kubwa ya darasa letu tutakuwa tunaandika Element na vipambizo vyake kwaajili ya kuziremba kuzipa sifa na muonekano tunaotaka.
Tunavyozidi kwenda mbele ufundi wa kuandika element ni kitu muhimu sana kukielewa, sio kitu cha kukariri ni kama kamchezo fulani hivi ka kuvutia.
Sasa tupitie maajabu ambayo madeveloper duniani wanafanya wanapoandika element.
1. Kwanza kila unachokiona mbele ya website yoyote duniani Kuanzia picha, video player, maandishi, maumbo etc, huongezwa kama element na hutumia kanuni zote za element tulizojifunza hapo juu pamoja na vipambizo mbali mbali ili kuleta unadhifu katika muonekano.
Kwahiyo kwa maneno ya kitaalamu unaweza kuita kitu chochote kinachoonekana mbele ya website element.
2. Element yoyote unayotaka ionekane na mtembeleaji wa website yako lazima uiandike ndani ya element kuu ambayo ni Body, <body> </body>.
Hii ni element inayoweka nafasi ya kuongeza element mahususi zitakazoonekana mbele ya website yako. Kama Website yako ina element moja ambayo ni Kichwa cha habari, basi element hiyo utaiandika kwa kuiweka ndani ya element hii.
Uandishi sahihi:
Ukiandika hivi; <body> "Hii ni Title ya Website Yangu Karibu tena"</body>
Unakuwa umeandika sawa. kwasababu kichwa cha habari umekiandika kama maandishi ya kawaida tu na sio element mpya.
Lakini ukiandika kichwa chako cha habari kama element nyingine kama hivi;
<body> <h1>"Hii ni Title ya Website Yangu Karibu tena"</h1> </body>.
Hapa utakuwa umefanya uandishi usiozingatia viwango vya ubora. Kanuni za uandishi bora wa element zinatutaka element mtoto(element ambayo ipo ndani ya element nyingine) ianze kwa kutumia Aya.
Code:[SIZE=4]<body> <h1> [I]"Hii ni Title ya Website Yangu Karibu tena" [/I]</h1> [/SIZE][SIZE=3][SIZE=4]</body>.[/SIZE][/SIZE]
Wakati mwingine developer utataka maandishi yako yawe ndani ya paragraph <p> </p>, Ili usipate shida kwanza jenga fikra ya kuandika element moja badala ya nyingine, halafu hakikisha kila element unaiandika mpaka mwisho, yaani opening tag na closing tag yake.
Kwa mfano huo hapa tutafata hatua zifatazo.
(a) Tutaandika element kuu na kuweka element ya paragraph ndani yake.
Code:[SIZE=4]<body> <p> </p> [/SIZE][SIZE=3][SIZE=4]</body>[/SIZE][/SIZE]
(b) Tutaongeza element yetu yenye maandishi ndani ya paragraph na kwakuwa itakuwa element mtoto wa paragraph basi tuta indent kama kawaida na kufanya kodi zetu kuonekana hivi.
Code:[SIZE=4]<body> <p> <h1>[I] "Hii ni Title ya Website Yangu Karibu tena"[/I] </h1> </p> [/SIZE][SIZE=3][SIZE=4]</body>[/SIZE][/SIZE]
Ha ha ha ha haha soo funy, logic hizi ndio zinatumiwa na madeveloper kucheza nazo ni raha kama kucheza video games tu, hapahitaji degree hapa.
Ok labda nikumalizie kwa kitu kidogo, kumbuka tu kuwa Vipambizo huongezwa baada ya kujua nini unataka kuongeza na unataka kuongeza ndani ya element gani?
Let say nataka maandishi yangu yawe na size ya 18px badala ya size ya asili (default) ambayo ni 12px, basi nitaongeza style attribute ambayo ni, style="font-size:18px".
Kwakuwa tunataka mabadiliko haya yatokee kwenye element moja tu basi attribute yetu tutaiongeza ndani ya element husika na kufanya code yetu ionekane kama ifatavyo:
Code:[SIZE=4]<body> <p> <h1 [B]style="font-size:18px"[/B]> [I]"Hii ni Title ya Website Yangu Karibu tena" [/I]</h1> </p> </body>[/SIZE]
Unit- 14- Mgawanyo wa Maeneo kwenye Web Page
Tukiwa tunaendelea kuchambua HTML kama Lugha ya mawasiliano kati ya web browser na Developer, Leo turudi nyuma kidogo na kuangalia jinsi ambavyo madeveloper tunaweza kutumia uwezo mkubwa wa kufikiria tulio nao ili kupangilia muonekano wa taarifa kwenye HTML Page.
Mara zote nimekuwa nikisisitiza kuwa web development ni ujuzi zaidi ya elimu, ni kitu kinachohitaji uwezo mzuri wa kufikiria kuliko degree.
Leo hatutabase sana kwenye kuandika kode, tutajifunza tag moja tu mpya, lakini tutazingatia zaidi kwenye mtindo wa kufikiria wakati unapanga taarifa zako kwenye Web Page ambayo awali tulikuwa tunaiita File maalum, file ambalo linahusika na kuwasilisha taarifa zote zilizomo ndani ya website kwa mtumiaji.
Katika hali ya kawaida web page huwa inakuwa na maeneo makuu matatu (3).
(a) Kichwa cha Website -HEADER
Kichwa cha website ni eneo la juu la website ambalo Hutengwa rasmi kwaajili ya kuweka taarifa za utangulizi kuhusiana na website. Hili ni eneo ambalo hukaa Jina la website/Logo, Kauli mbiu ya website pamoja na Link muhimu zitakazokuunganisha na page zingine ndani ya website.
(b) Eneo kuu -BODY
Hili ni eneo la katikati ambalo Developer hulitumia kupangilia taarifa mbalimbali kutokana na mahitaji ya website, Developer anaweza kuligawa eneo hili mara nyingi awezavyo ili aweze kuboresha muonekano wa taarifa.
(c) Eneo la Chini -FOOTER
Hili ni eneo linalotengwa chini kabisa ya website, pia hutumika kuweka taarifa mbalimbali na link kama ambavyo developer atafikiria kutokana na ubunifu wake.
Note: Kila eneo kati ya maeneo haya matatu, developer anaweza kuligawa mara nyingi awezavyo, Mfano, eneo kuu developer anaweza kuligawa likawa na maeneo mengine matatu kisha akayapa majina na kuyaita upande wa kushoto, upande wa kulia pamoja na Kati .
Tunaingia kwenye hatua tamu zaidi, kwanza tutatengeneza Page iliyogawanywa kwenye maeneo haya matatu, baadae ili tuweze kuyatambua maeneo hayo na mipaka yake tutatumia vipambizo vya mitindo ili kuyapa maeneo tutakayotenga rangi kwa madhumuni ya kuyatofautisha.
Developer makini mara zote ni yule anayeweka mpango wote wa kile anachotarajia kufanya kwenye makaratasi kabla ya kuingiza kwenye utendaji.
Kwenye mchoro hapa chini ni kitu tunachotarajia kufanya:
View attachment 233247
Ugawanyaji wa maeneo
Tunatumia Tag ya Division tunapotaka kutenga eneo, tag ya Division huandikwa <div>, Tag hii inapotumika hutengeneza boksi ambalo huweza kushikilia taarifa zingine ndani yake. Mara nyingi Division hutumika kugawa Web Page katika maeneo tofauti tofauti.
Ili uweze kugawa eneo kwa kutumia division unatakiwa kutengeneza element ya Division, element ya division inatengenezwa hivi: <div> </div>
Ukitengeneza element hii inaandaa nafasi kama boksi, ili uweze kupata boksi lenye ukubwa unaotaka unalazimika kutumia vipambizo ili kuipa element yako sifa za ziada kama ukingo(border), rangi ya nyuma (Background color) na kadharika.
Mfano:
Code:[SIZE=3]<div> Hili ni eneo lililotengwa </div>[/SIZE]
Ili uweze kulipa eneo hili ukubwa rasmi na background itabidi tuongeze kipambizo cha mtindo(Style Attribute). Tukiongeza Style Attribute kwenye tag awali element yetu itakuwa hivi:
Code:[SIZE=3]<div style="[B]width:100%[/B]; [B]height:300px[/B]; [B]background-color:black[/B]"> Hili ni eneo lililotengwa </div>[/SIZE]
Ukiangalia vizuri hapo juu tumeongeza kipambizo cha mtindo kwenye tag awali ya element yetu, na tumeongeza urefu na upana.
Tumetumia width:800px kuongeza urefu na height:300px Kuongeza upana. Ili eneo letu liweze kuonekana tumelazimika kuongeza rangi ya ukuta wa nyuma(Background color) kwa kuongeza background-color:black Kwenye kipambizo.
Note: Unaweza kuona kuwa kwenye upana badala yakutumia kipimo rasmi cha px Tumetumia asilimia 100, huu ni utaalamu uliopo kwenye HTML unaowezesha element kuchukuwa upana wote wa web browser bila kujali size.
Njia hii huwezesha element kuchukua upana wowote kulingana na browser husika, kama upo kwenye simu basi itachukua upana wa browser yako ya simu na kama upo kwenye komputer au tablet basi itachukua upana kulingana na upana wa browser unayotumia.
Ukisevu kodi hiyo na kufungua web page yako utaona eneo lenye rangi nyeusi likiwa limejitenga kwenye vipimo tulivyochagua.
Tuishie hapa kwa leo Darasa lijalo tutamalizia Sehemu ya body na Footer ambayo ni eneo la chini la web page
*********
New Updates: Tar 15/03/2015
Unit- 14b- Mgawanyo wa Maeneo kwenye Web Page (part 2)
Kabla ya kuingia kwenye Kipengele kinachofata, leo tutamalizia maeneo mawili muhimu ambayo tuliyaacha kipolo wiki hii, Ambayo ni eneo la kati la website pamoja na eneo la chini.
Kugawa maeneo yaliyobaki kwenye website yetu haliwezi kuwa zoezi gumu tena kwani tutaenda kutumia elment ileile ya Mgawanyo <div>.
Na ili kurahisisha zaidi unaweza ku-copy na ku-paste kodi tulizotumia kugawa eneo la juu kwa malengo ya kutengeneza nakala zinazofanana, baada ya kukopy mara tatu kwa aajili ya kupata eneo kuu na eneo la chini, basi kodi zako zitaonekana kama hivi:
Baada ya kusevu kod hizi kwenye website yako, ukiifungua kwenye browser utaona eneo kubwa jeusi likiwa limeziba sura yote ya webpage. Hii ni kutokana na maeneo yote matatu kuungana bila kuacha nafasi kati ya eneo na eneo.Code:[SIZE=4] <div style="width:100%; height:300px; background-color:black"> Hili ni eneo la Juu </div> <div style="width:100%; height:300px; background-color:black"> Hili ni eneo La kati </div> <div style="width:100%; height:300px; background-color:black"> Hili ni eneo Chini</div>[/SIZE]
kunanjia nzuri za kitaalamu zinazoweza kutumika kuweka nafasi kati ya element na element kwenye webPage lakini kwa sasa tutumie njia hii nyepesi ya breack <br>.
Tukiongeza breack baada ya kila element, kila baada ya eneo moja lililotengwa kutakuwa na kinafasi kidogo na kufanya maeneo tuliyotenga yaonekane.
Kitu kingine tutakachofanya ni kutofautisha ukubwa wa eneo la katikati na eneo la juu na la chini, kwakuwa eneo la kati kati ndio eneo kuu, basi linatakiwa kuwa na nafasi kubwa kuliko maeneo mengine.
Hivyo basi tutabadili kipambizo cha sifa ili kulipa eneo la kati kati urefu mkubwa zaidi na kuacha maeneo ya juu na chini yakilingana, Vile vile ukiangalia maeneo yote tuliyogawanya yana rangi moja ambayo ni nyeusi hivyo basi tutaweka rangi tofauti ili kuyatofautisha zaidi maeneo yetu.
Code:[SIZE=3]<div style="width:100%; height:100px; background-color:grey"> Hili ni eneo la Juu </div>[/SIZE][SIZE=3] <br> [/SIZE] [SIZE=3]<div style="width:100%; height:400px; background-color:blue"> Hili ni eneo La kati </div>[/SIZE] [SIZE=3] <br> [/SIZE] [SIZE=3]<div style="width:100%; height:100px; background-color:grey"> Hili ni eneo Chini</div> [/SIZE]
Baada ya kubadilisha eneo la juu na la chini na kuyapa rangi ya grey, kisha kuyapunguzia urefu mpaka 100 na kuongeza urefu wa eneo la kati na kulibadili rangi kuwa ya blue sasa webpage yetu itakuwa na muonekano mzuri ambao umegawanywa katika maeneo matatu.
kwenye eneo la juu tubadili neno "Hili ni eneo la juu" kuwa Heading ya website na tuiite Swahili Web Development Class. Tumeshajifunza kila kitu, tumejifunza jinsi ya kutengeneza element, na jinsi ya kuiweka ndani ya element nyingine.
Hapa kwanza tutatengeneza element yetu ya Heading kwa kutumia heading tag <h1>,
<h1>Swahili Web Development Class</h1>.
Kisha tutaiongeza element hii ndani ya eneo la juu ambalo tumeligawa kwenye webpage yetu.
Ondoa "Hili ni eneo la Juu"
<div style="width:100%; height:100px; background-color:grey"> Hili ni eneo la Juu </div>
Weka element yetu: <h1>Swahili Web Development Class</h1> utapata:-
<div style="width:100%; height:100px; background-color:grey"> <h1>Swahili Web Development Class</h1> </div>
View attachment 234746
Huu ndio muonekano wa webpage yetu kwa sasa: