Hello Tech Members.. Hope mpo poa wakuu,kwa mda mrefu nilitamani kuwepo na uzi ambao Web developers tuta share tulichonacho kwa wenzetu ambao wanaanza safari Yao ya Programming au wanaotaka kupanua uwezo wao kwenye hii field Hii ni special thread kwa ajiri ya kujifunza Website Development, 1.Tutajifunza jinsi gani Website zinatengenezwa kwanzia hatua ya kwanza kabisa (From the Scratch) 2.Aina za Websites (Au Web application) 3.Jinsi ya kuunda Database (Tutatumia MySQL database system) 4.Nini maana ya DNS(Domain Name System),Browsers,Servers na hosting 5.User interface (UI) na User Experience (UX) 6.Front End Languages (Hapa tutatumia Bootstrap framework ambayo imejumuisha HTML,CSS,na JavaScript) 7.Backend Language (Hapa tutatumia Php(5-7) + PDO kwasababu ya umaarufu wake katika Web design) 8.Nini maana ya XAMPP,jinsi ya ku install na kutumia 9.Nini maana ya IDE(Integrated Development Environment) 10.Mpaka mwisho wa hii course utakua na uwezo wa Kutengeneza Online Store yako yenye kila features kwa ajiri ya Electronic commerce (Ecommerce) Hii course inaanza mwanzo kabisa....hautakiwa kuwa na Uzoefu wowote wa programming kuielewa Nitaanza na Wewe kwanzia hatua ya kwanza kabisa Niki assume haufahamu chochote kuhusu Codes Requirement: Computer (Window 7 mpaka 10) Internet Connection Na mda wako Karibuni UTANGULIZI Nini maana ya programming Language? Nini maana ya Codes? Assume hufahamu chochote kuhusu programming, na ushawahi kusikia kuhusu Programming language au Coding ila hujui nini kinamaanishwa yanapotajwa hayo maneno Hii ni step muhimu na ya msingi katika hii course,kabla hatujaanza kuelezea Nini maana ya website inabidi tuelewe kwanza tuna maanisha nini tunaposema neno programming (Coding kwa jina jingine) Programming ni nini? Programming imetokana na neno 'Program' Program kwa lugha nyepesi ni orodha ya maagizo(Set of instructions) ambayo Computer inapewa kwa ajira ya kutekeleza kazi fulani Tunapotaka Computer itekeleze Jambo fulani (Mfano, Kutengeneza 'Log in form' katika website ambayo inamruhusu mtumiaji kuweka Email pamoja na Password yake kabla hajaingia kwenye website yetu) Huwa tunaandika program,itakayoipa maelezo computer yetu Juu ya kitu tunachohitaji ifanye (Kutengeneza Login form) Kwa bahati mbaya, Computer haielewi Lugha yoyote ya kibinadamu Haielewi Kingireza,Kifaransa Wala kiswahili) Computer inaelewa kila kitu kwa kutumia lugha inayoundwa na nambari mbili tu (0 na 1) Huu mfumo huu wa Lugha unajulikana Kama Binary number system Kwa hio maagizo yoyote ambayo tutaipa Computer yetu,inabidi yawe katika lugha hii ya kihesabu (0 na 1) Ni vigumu Sana kwa Binadamu kuandika program kwa kutumia binary number system (lugha ya 0 na 1) Hapa ndipo programming language zilipokuja Programming Language ni Kama mkalimani ambaye huwa Kati yetu sisi Binadamu na Computer Ni lugha zinazotusaidia kuzungumza na Computer kama ambavyo tunatumia kiswahili au kingereza kuzungumza na binadamu wenzetu So, Programming ni ujuzi wa kuandika programu ya computer kwa kutumia programming language Programu ya computer ni orodha ya maigizo tunayoipa computer kwa ajiri ya kutekeleza jukumu fulani Na Programming language ni lugha tunayoitumua kuzungumza na computer/Kuandika programu ya computer Programmer ni mwandishi wa programu za Computer Bila shaka mpaka sasa,tutakua tumetoa tongotongo kidogo kuhusu maana nzima ya programming Kabla hatujaanza somo letu,kuna maneno ya msingi tunayopaswa kuyafahamu.Tunapotumia Programming language kuandika program fulani ya computer Kile ambacho sisi tunakiandika huitwa Source code Source code ni programu ya computer iliyoandikwa kwa kutumia Programming Language,ni programu ya Computer ambayo sisi binadamu tunauwezo wa kuiandika,kuisoma na kuielewa Baada ya kuandika Source code zetu,inabidi zibadilishwa kwenda katika Lugha ambayo Computer inaielewa(Binary number system) Kazi ya kubadili Source code kwenda kwenye (Binary number system) inafanywa na Compiler Complier ni software ya computer inayo badili Source codes zetu kwenye kwenye binary number system(Lugha ya computer).Source codes zilizobadilishwa na Complier kwenda kwenye Binary number System zinajulikana kwa jina la Machine codes Machine Codes ni programu ileile ya Computer tulioiandika mda huu ikiwa katika lugha ya computer(1 na 0) Sasa Computer itafuata maagizo tulioipa baada ya kusoma hizi Machine codes Kwa lugha nyepesi,Complier ni kama mtafsiri anayebadilisha Source codes zetu kwenda katika lugha ambayo Computer itaelewa(Machine Code) Complier inapofanya kazi ya kubadilisha Source codes zetu kwenda kwenye machine codes,huwa inapitia mstari mmoja baada ya mwingine wa Source codes zetu kuangalia kama kuna makosa yoyote tulio yafanya Hiki kitendo cha Compilier kuhakiki Source codes zetu kinaitwa Debugging Debugging ni kitendo cha kuhakiki makosa katika Source codes kabla ya kuyabadili kwenda kwenye Machine codes Kwanini Debugging? Computer haitayafanyia kazi maelekezo yetu,kama kuna makosa,kazi ya Debugging ni kutusaidia kuandika Programu ya Computer anbayo itafanya kazi/Kutekelezwa na Computer Mchakato mzima wa kuandika,kuhakiki na kukamilisha programu ya computer hufanywa kwa kutumia IDE IDE ni kifupi cha Integrated Development Environment,hii ni Software maalumu inayotuwezesha sisi kama Programmers kuandika Programu zetu IDE hufanya kazi ya Debugging(Kuhakiki) na Execution(Kutekeleza) Program yetu Kwa lugha nyepesi, ni daftari na peni tunazotumia kuandika programu ya computer Hapo juu utaona neno jipya kwako(Assume hujawahi kulisikia au hujui nini maana yake)-Software Tumesoma kuwa Program ni orodha ya maagizo tunayoipa Computer kwa ajiri ya kazi fulani, ila Software ni mkusanyiko wa programu nyingi za Computer zinazofanya kazi fulani Mfano,kama tuna Programu A kwa ajiri ya kuchukua taarifa za mtumiaji wetu(Mf Email na Password) Halafu tuna Program B kwa ajiri ya kuhakiki hizo taarifa kama ni sahihi(Correct password au Wrong Password) kisha tuna Programu C kwa ajiri ya kumruhusu mtumiaji kuingia kwenye website yetu(Kama taarifa zake zipo sahihi) Mkusanyiko huu wa Programu(A,B na C) huitwa Software Tutaona zaidi huko mbele Mpaka hapo,kidogo tumepata Mwanga juu ya somo letu,nimejitahidi kutumia lugha nyepesi sana katika utangulizi ili tusiachane nyuma,kadri tutakavyozidi kusonga mbele Lugha pia itazidi kubadilika Sasa kabla hatujaanza Somo letu la Web Programming(Tulipe Special code ya IS 181) inabidi tuwe na IDE kwenye Computer zetu Kuna aina nyingi za IDE zinazotumiwa na Programmers wengi duniani,kuna Visual Studio,Atom, n.k Ila katika somo letu hili nitatumia Atom text editor Atom ni IDE,Software inayotusaidia kuandika programu zetu HATUA ZA KU DOWNLOAD NA KU INSTALL ATOM KWENYE COMPUTER YAKO Hapa inapaswa uwe na Computer yenye Window 7 mpaka 10 pamoja na Internet Connection ili uweze kupakua na Ku install Atom Nenda katika Official website ya Atom kupakua Software hii(Ni open source software/Free) kupitia hii link hapo chini(No 2) A hackable text editor for the 21st Century Pakua atom kulingana na aina ya operating system yako(Mimi natumia window 10 64 bits) Baada ya kuipakua,nenda katika folder yako uliyotumia kuipakua(Na assume Download folder),utaiona set up ya Atom text editor I Run kisha usubiri mpaka itakapokamilika Baada ya installation kukamilika,Atom itafunguka na kukuletea Welcome Screen kama hii Kama kuna tatizo lolote umelipata katika installation usisite kunijulisha kwenye comment Baada ya hapo sasa tutakua tayari kuanza somo letu la Web Development.... Kwa msaada zaidi Kuhusu installation ya atom:0623391590 au waweza comment hapo chini kama umepata shida yoyote Installation ya Atom text editor ni muhimu sana katika somo letu,kwani ndiyo IDE tutakayoitumia kwa kiasi kikubwa katika course hii,ni muhimu sana kunitaarifu kama kuna ukakasi wowote umeupata katika hizo hatua hapo juu Baada ya kukamilisha hio hatua,sasa ni wakati wa kuanza somo letu rasmi,na assume kila mtu anayo Atom katika Pc/Desktop yake 1.WEBSITE NI NINI? Katika dunia hii ya karne ya 21,internet imekua sehemu kubwa ya maisha yetu.Tunapoperuzi mitandaoni kwa mfano Jamiiforums,Facebook,Instagram,Muungwana blog,au tunapoingia Alibaba au amazon kununua vitu mtandaoni au Youtube kutazama video zinazo trends tunachokifanya ni kuperuzi kurasa(Web pages) na tovuti hizo(Websites) kupata taarifa tunazozihitaji. Kwa lugha ya jumla, Website ni mkusanyiko wa kurasa za tovuti zilizounganishwa na hyperlinks. Kabla hatujafahamu nini maana ya hyperlinks,angalau tutoe tongotongo kuhusu maana nzima ya internet.Tunaitumia kila siku lakini wenda hatujui nini maana yake Internet ni mtandao wa mitandao(miunganiko) ya computers zote duniani ambao unamuwezesha mtumiaji wa computer A kupata taarifa(Information) zilizohifadhiwa na Computer B Internet ni mfumo unaokupa uwezo wa kutumia Computer yako,Computer A ukiwa nyumbani kupata taarifa zilizohifadhiwa na Computer nyingine iliyo popote pale duniani kwa mfano Server ya Jamiiforums(Computer B) Note:Ninaposema muunganiko wa computers zote duniani,hapa naziweka smartphones na tablets katika kundi moja la Computers Kitaalam,Computer ni kifaa chochote cha kidijitali kinachochukua taarifa za mtumiaji(user's input),kisha kufanya mahesabu kwa kutumia inputs hizo kisha kutoa matokeo yanayoendana na taarifa hizo(output) Unapobonyeza nambari *150*88 (assume unatumia halotel) hio ni input,simu yako itafanya mahesabu na kurudisha matokeo(output) yanayoendana na input hizo yaani menu ya Halopesa Kwa maana hio,smartphone na tablets ni computers N Taarifa hizi tunazozipata kupitia Internet znaikua katika mfumo wa kurasa za tovuti,kwa maneno mengine tunazipata hizi taarifa kupitia Website,ambayo ndio mkusanyiko wa kurasa nyingi za tovuti zilizounganishwa pamoja na hyperlinks Watu wengi wamekua wakichanganya kati ya Internet na WWW au Web kwa kifupi.Kiuhalisia Internet na www ni vitu viwili tofauti,Internet ni mfumo au muundombinu unaotuwezesha sisi watumiaji kupata taarifa zilzoweka katika mfumo mwingine wa tovuti(www) Ukitaka mambo yasiwe magumu zaidi,unaweza kutazama Internet kama Jengo kubwa la maktaba, linalokupa nafasi ya kupata taarifa zilizohifadhiwa kwenye vitabu(websites) Sasa hyperlinks ni nini?,maana nzima ya hyperlinks tutaiona tukiwa tunaanza kuunda kurasa zetu za kwanza za website Ila kwa sasa hyperlinks ni kama pini zinazounganisha kurasa moja ya tovuti pamoja na kurasa nyingine Kwa mfano nina kurasa A ya tovuti,let say 'Log in page' baada ya mtumiaji kubonyeza kitufe cha login,hyperlink iliyowekwa katika kitufe cha login itampeleka mpaka katika home page yetu(ukurasa wa nyumbani) au kurasa ya kwanza ya tovuti yetu Mistari hio katika picha hapo juu, ni mfano mzuri wa hyperlinks zinazounganisha kurasa za tovuti. Nina imani wote tupo pamoja,na mpaka wakati huu angalau tunajua nini maana ya webisite kwa uchache Website ni kama kitabu kinalichoundwa na kurasa(webpages) zilizounganishwa na hyperlinks,sasa tunapotaka kuandika kitu chochote katika kurasa zetu ama taarifa ambazo mtumiaji atazikuta katika tovuti yetu huwa tunatumia lugha maalum zinazotusaidia kuunda kurasa zetu za tovuti Mfano tunapotaka kuandika uzi hapa jamiiforums,tutataka uwe na heading(kichwa cha habari),paragraph,mistari,boldness hivyo vyote tunavifanya kwa kutumia codes (lugha maalumu) ya BB codes Kwa maana hio hio,tunapotaka kuunda kurasa yetu ya tovuti ambayo tunataka iwe na heading,paragraph,section,sidebar n.k uwa tunatumia lugha maalum inayoitwa HTML HTML sio programming language,kwa maana ya programming language tuliyo iona hapo juu,bali HTML ni mark up language ama lugha inayotusaidia kusuka(format) kurasa za tovuti yetu HTML ni kifupi cha hypertext mark up language Hypertext ni document tu iliyopo kwenye computer(au kurasa yetu ya website) ambayo tunaweza kuiunganisha na Document au kurasa nyingine yoyote kwa kutumia hyperlink So HTML inatusaidia sisi kuunda hypertext yetu au ukurasa wetu wa tovuti(ndio maana ya neno mark up) Sasa kabla hatujaanza kuona kurasa za tovuti zinatengenezwa vipi,hatuna budi kupata elimu ya msingi kuhusu HTML Hapa nitakua tofauti kidogo na wenzangu,nitagusia mambo ya muhimu tu unayopaswa kuyajua kuhusu HTML na ni mambo pekee utakayokutana nayo katika uandishi wa tovuti(Web development) Sehemu kubwa ambayo tutaichimba kwa undani ni Bootstrap framework ambayo tutaifahamu zaidi huko mbeleni. Lengo ni kutafuta namna ambayo tutaelewa hivi vitu kwa haraka bila kupotezeana mda,so tutajifunza mambo ya msingi tu ambayo ni muhimu katika course hii Nimechagua Bootstrap kwasababu itatufanya sisi tuwe sawa kabisa na wenzetu wanaofahamu HTML,CSS na javascripts Usihofu chochote,utajua nini maana ya CSS na javascript hapo mbeleni,ila taarifa njema ni kwamba Boostrap ni short cut itayotufanya sisi tuzitumie hizo lugha (CSS na Javascript) bila hata ya kuzifahamu kwa undani. Hello Folks?Weekend inasemaje? Leo tunaenda kuunda kurasa yetu ya kwanza ya tovuti(Our first webpage),hii ndio sehemu ambayo inabidi uvute kiti chako karibu na PC/Dekstop yako Tunaenda kuunda webpage yetu ya kwanza ya website yetu ambayo nimeipa jina la Jamiipage ila unaweza kuita jina lolote lile baada ya kuelewa jinsi gani tunaitengeneza Nitaelezea kila kitu unachopaswa kujua na kila mstari wa code ambao utakuepo,so GET READY Kabla hutujaanza kuna machache twapaswa kuyafahamu kuhusu html,css,javascript,Bootstrap na Web browser Hapo juu tumegusia nini maana ya HTML,lakini leo tutaichimba kwa undani kidogo,na pia tunafahamu ya msingi kuhusu CSS,Javascript,Bootstrap na Web browser....... Mwisho,tutakuwa na uwezo wa kutengeneza webpage yetu ya kwanza itakayokua kama hivi Na kwa Mobile devices Ondoa hofu,tutaelezea kila kitu na kila hatua tutakayopiga.....SO GET READY Hii lecture itaanza saa 3:00 usiku.Asante Hey guys...Sorry kwa kuchelewa! NINI MAANA YA WEB BROWSER? Kabla hatujaanza kujifunza msingi wa HTML,tuelewe kwanza nini maana Web Browsers na jinsi gani zitazungumza na HTML code zetu.Kama tulivyoona hapo juu kuwa HTML sio programing language, ni mark up language ambazo tunazitumia ku format web pages Web Browser ni software maalumu zinazofanya kazi ya kutafsiri(Intepret) HTML codes zetu Kuielewa nini maana ya Browser na jinsi gani inafanya kazi tuchukulie mfano mdogo pale tunapotafuta information online Kawaida huwa tunatumia programu kubwa mbili, Search Engine mfano Google,Bing,Yahoo,Baidu n.k pamoja na Web browser kama Operamini,Chrome,Torch browser,Safari, na Internet Explorer(Sidhani) Kazi kubwa ya Search Engine ni kutuletea list ya Websites yenye taarifa zinazoendana na Keyword au kile tunachokitafuta,Baada ya Search Engine kutuletea orodha ya websites zenye taarifa tunazotaka Web browser kazi yake huwa ni kuchota hizo taarifa kutoka katika Servers ya hizo Tovuti na kutuletea katika devices zetu Server ni computer maalum ambayo kazi yake kubwa ni kuhifadhi kurasa zote za Website husika,tutajua zaidi maana ya Server huko mbele Kinachofanyika ni kwamba Web browser zinachukua Web pages husika katika Server zenye taarifa ya kile tunachotafuta,kisha zinasoma au kutafsiri HTML codes zilizo katika Web pages hizo, na kuzipanga Contents za web pages hizo kulingana na hizo HTML codes.So tunapoonza somo letu la HTML codes inabidi tufahamu kuwa Web Browser ndio Software zitakazo fanya kazi ya kusoma au ku Intepret HTML codes zetu na kutengeneza kurasa zetu kulingana na maelekezo tuliyozipa katika codes zetu Kwa ku summarize Search Engine ni software maalum inayofanya kazi ya kukusanya na Kupanga orodha ya websites zote duniani kulingana na kile mtumiaji anachotafuta (User keyword) Search Engine tutaitazama kwa undani pale tutakapoanza somo letu la SEO(Search Engine Optimization) Web browser au browser hii ni software inayofanya kazi ya kuchota kurasa ya tovuti kutoka katika Server husika, kusoma/kutafsiri HTML codes zilizotumika kuunda kurasa za tovuti,kisha zinafanya kazi ya kutuonyesha (Display) hizo kurasa kwa kufata maelekezo ya HTML codes zilizopo Server ni computer maalum inayofanya kazi ya kuhifadhi kurasa zote za tovuti husika INTRODUCTION TO HTML Html ni mark up language inayotumika kuunda kurasa za tovuti,kimsingi HTML ni lugha iliyoundwa kwa tags maalum na kila tag imebeba maagizo fulani yatakayosomwa na Web browser kuhusu muundo wa kurasa ya tovuti Tags hizi zipo katika aina mbili,Opening tags na Closing tags na mara nyingi huambatana pamoja kama Pair,usihofu kama bado hujaipata concept,naamini tutakuwa pamoja mda si mrefu <> hii ni opening tag ya HTML code hii ni closing tag ya HTML code Kwa pamoja huwa hivi <>,simple Ndani ya hizi tags,opening na closing tags huwa kuna majina yanayoeleza kazi husika ya HTML code hio,kwa mfano -Ndani ya opening na closing tags,kuna neno 'html',html kwa hapa ndio jina la tag yetu liitakalopeleka maagizo kwa web browser kuhusu aina ya document yetu(yaani ni HTML document).Web browser itakapo kutana na tag ya aina itatambua kuwa Document yetu au Web pages yetu imeundwa na HTML codes,kwa maneno mengine jina la tag ndio hutumika kuipa taarifa Browser kuhusu aina ya maneno yatakayokaa katikati ya tags zetu yaani <>....hapa... Kwa mfano; Jamiipage -Ndani ya tags zetu,kuna neno 'title',title tag imebeba maagizo kuhusu aina ya neno lililo katikati ya tags zetu(Jamiipage),title tags kwa kawaida hufanya kazi ya ku specify jina la Webpage au Website yetu Kwa mfano wa hapo juu,Web browser itatambua kuwa jina la kurasa au website yetu ni Jamiipage Kwa haraka haraka,tupate maana ya tags tutakazo kutana nazo sana katika somo letu hili; TAGS MAANA YAKE -Ina specify(bainisha) aina ya document(web page) yetu -Ina specify kuwa document yetu imeundwa kwa kutumia HTML -Hii hubeba taarifa za msingi kuhusu Document yetu -Ina specify jina la Document yetu <body> -Ndio tags inayobeba content zote za Document yetu <h1> mpaka <h6> -Hizi zina specify kichwa cha habari cha Document yetu <p> -Ina specify paragraph ya Document yetu <br> -Ina tumika kuruka mstari katika Document yetu <form> -Inatumika kuunda fomu maalum kwa ajiri ya kukusanya taarifa za users <input> -Huambatana na form tags kukusanya user's input <textarea> -Hutengeneza 'comment box' kwa ajiri ya user's input(Comment,post) <button> -Hutumika kuunda clickable button <img> -Hutumika ku display picha(image) katika document yetu <link> -Hutumika kuunganisha Document yetu na External Documents TUPATE BREAK KIDOGO EPISODE 2: Kutokea Karantini April,15 2020 Wakuu,tunaendelea tena na Darasa letu la programming for beginners. Najua hiki kipindi dunia inapitia katika hali ngumu ila Don't worry hautokufa,.......ila sina uhakika! Anyway,tuendelee tulipoishia kwenye HTML Tags Refreshing: Tukumbushane kabla hatujaendelea zaidi, HTML ni nini? >HTML ni standard mark up language kwa ajiri ya ku design web pages,ni lugha rahisi sana kujifunza >HTML ndio inahusika kuunda mfumo mzima wa web page,kuinona hii katika action tuchukue mfano mdogo wa web page Hipo picha hapo juu ni mfano mzuri wa standard web page Juu kabisa tuna ona header,ni kama main title ya webpage yetu Chini yake kuna navigation bar au Navbar,hii kama jina linavyo suggest inatupa access ya kuna navigates au kuperuzi kurasa au categories muhimu katika website yetu Mfano Home,Our Team , Projects , Contact na form kwa ajiri ya ku search data katika website yetu Pembeni tuna Section , kwenye neno 'Related' hapa tunaweza kuweka importants links labda say older blogs posts,articles etc Katikati tuna Main body hapa ndipo tunapoweka main content ya website yetu, ni kama dhima kwenye barua Aidha New posts,threads,images,Video kwa ecommerce systems hapa tutakuwa na lists ya products zetu Kwa mfano wa hapo juu tunaona kwenye main body kuna single post yenye heading na subsections, inategemea content zipi umelenga katika website yako Chini kabisa kuna Footer hii ni part ya mwisho ya web pages yetu,kwa kawaida hapa unaweza kuweka Privacy policies za website yako , wapi unapatikana , services unazotoa , kama ni organization basi zitakaa links za partners wako Ila footer rahisi huwa ina single statement inayoonyesha copyright ya website yako labda na mwaka Mfano copyright 2050 Nobody.All right reserved Ku sum up standard web pages ina consist Header Navbar Main body Sections Footer Hizi kwa jina la pamoja huwa tunaziita web components Hizi web components ndizo tunazoziweka pamoja na kuunda web page yetu Sasa HTML tags ndizo zinazotumika kuunda au ku design hizi web componets CSS >CSS ni stylesheet language , yaani lugha tunayokuja kuitumia baadae ku style(Kupamba) web components zetu Tunazoziunda kwa kutumia HTML Mfano mzuri ni baada ya kujenga sasa nyumba yetu tunaipaka rangi >Ukiitazama hio picha ya web page hapo juu utaona kuna background colors kwenye baadhi ya components zetu Hizo rangi sio part ya HTML ni CSS na tutaona jinsi gani hizi lugha mbili zinafanya kazi pamoja hivi punde >Technically , HTML is all about layouts au structure ya web pages yetu na CSS is all about presentation yaani jinsi gani webpage yetu itakavyoonekana NINI TUNAENDA KUKIFANYA? >Leo tunaenda ku design complete web page kwa kutumia HTML,CSS na Javascript >Tuna design webpage yetu kwa msaada wa popular web framework mbili ambazo ni Bootstrap(Version 4.1.1) na Tailwind css.. >Tutaongelea pia kuhusu Frameworks na umuhimu wake katika web development Napenda ku re build Web interface ya Jamiiforums kama inavyoonekana kwenye PC zetu Mwisho wa hii tutorial utakua na uelewa mkubwa kuhusu HTML,CSS na Javascripts Lakini kabla hatujafika huko,tuta design basic web pages kwanza kwa kutumia HTML pekee Then tunaongeza CSS na mwisho Javascript ili uone tofauti zao First of all naomba ufungue Text Editor yako uliyo install kwenye Pc ,iwe Atom , Visual Studio au Sublime text whatever Kama hizi tools bado huna, nenda kwenye hizo links hapo juu kudownload latest versions ya hizi Editors Ni muhimu sana , hizi ndio Microsoft words za web pages zetu Kama unataka unanze kwa haraka kuna hii alternative japo si recommed sana Visit hii website ya codepen na ufungue account pale,huko utapata online editor kwa ajiri ya kuandika na kutest code zako codepen Kama kuna ugumu wowote utapitia kwenye installation ya hizo editors na jinsi ya kuzitumia,nichek whatapp. Ok,baada ya kufungua Editor yako , create new folder then lipe jina lolote , langu nitaliita webtutorial Then fungua hili folder kwa kutumia text editor yako,kwa wale wanaotumia VS code(Visual studio) kuna simple shortcut (Right click.then open with code) Baada ya kufungua folder lako ndani ya text editor, create new file na lipe jina la index.html au index.htm index na default name ambalo linawakilisha main page ya website yako,in fact browsers zote huwa zina treat file lolote lenye jina hili kama entry point ya website yako,however kwa kuwa tuna deal na only single file au page upo free kulipa JIna lolote mfano home.html .html na .htm hizi ni HTML extensions na kazi yake kubwa ni kuiambia browser kuwa hili file lime contain HTML mark up (as you know kuna aina nyingi ya mafile, ili ku identify nature ya kila file huwa tunatumia extensions , kwa plain text tungetumia .txt extensions...tutaona zaidi kuhusu hizi extensions hapo baaae) Ukiwa katika file lako tupu la index.html Kama unatumia Atom, click html + Tab Atom ina generate hizi boilerplate code for you <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> Most of tags nimezielezea tayari huko juu, so ili tusipoteze mda lets start coding...,tuna design simple web page using HTML kwanza: Basic webpage

HOME TEAM WORKS PROJECTS CONTACT

This is Heading

This is paragraph

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, voluptate natus. Vitae asperiores quasi totam modi laborum. Itaque corrupti labore quam, aut, eligendi culpa nobis possimus sed voluptatibus perspiciatis dolorum?

This is end of paragraphs

Hapo juu ni simple HTML mark up zinazoonyesha basic web page yetu,nimejaribu kwenda na zile tags muhimu ila upo free kuongeza tags zaidi, For more info kuhusu HTML tags visit hii link HTML Reference Basically , tumeanza ku design header tag yetu,hii ni kama container ambayo ina beba portion ya kwanza ya web page yetu yaani navbar Then tuka define navbar component , ambayo inatupa basic navigation katika website yetu kwa msaada wa anchor tags Then tukaja ku define section , main body(kwa kutumia main tags) halafu mwisho tukamalizia na footer. Lengo hapa ni kukuonyesha kazi kubwa ya HTML, Browser kazi yake kubwa ni kusoma HTML documents na display content kama kwa kufata instructions za HTML tags zetu, bila ku display actual html tags Uki view hizo code katika browser,utakachoona ni plain text, So kilichofanyika hapo ni ku design layout ya web page yetu Kazi ya style au kuremba webpage hii ni CSS tunaona hapo baadae: Source code.. Inaendelea......... subscribe EDITED: Eeebana Eeeh sorry kwa kuutelekeza huu uzi kwa mda, Nimeona kuna baadhi wa watu wana ham ya kujifunza kuhusu Fundamentals za Computer Science & IT Kama Web development , Mobile App Development na Hata Software Development Nitaundeleza huu uzi next week baada ya PASAKA Na I hope Nita Cover Latest Programming Technologies kama >React Native for Cross platform Mobile Development (Ios && Android) React Native kwa ufupi ni Hottest app development framework kwa sasa,ambayo itakusaidia ku create Mobile app ya ukubwa wowote ule kwa urahisi >Tutajifunza pia Laravel (Ver 5.8) Hii ni PHP framework kwa ajiri ya web development >Pia nitagusia kuhusu Tailwindcss ambayo kwa wale wabovu wa CSS hii ni framework muhimu zaidi kujifunza Kwa sababu itakuwezesha ku design complex UI components bila hata mstari mmoja wa CSS Pia kuna issue yoyote ambayo utahitaji nigusie kwenye huu uzi Ni Pm Au nicheck via 0748333586

Darasa la Programming for beginners (Jifunze Kutengeneza Website From the Scratch)

JF-Expert Member

Senior Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

Senior Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

Member

JF-Expert Member

Our Community

Regional Communities