Kuchwizzy
JF-Expert Member
- Oct 1, 2019
- 1,188
- 2,578
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
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
<html></html>
-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;
<title>Jamiipage</title>
-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
<!DOCTYPE> -Ina specify(bainisha) aina ya document(web page) yetu
<html> -Ina specify kuwa document yetu imeundwa kwa kutumia HTML
<head> -Hii hubeba taarifa za msingi kuhusu Document yetu
<title> -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?
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
Hizi web components ndizo tunazoziweka pamoja na kuunda web page yetu
Sasa HTML tags ndizo zinazotumika kuunda au ku design hizi web componets
CSS
Mfano mzuri ni baada ya kujenga sasa nyumba yetu tunaipaka rangi
NINI TUNAENDA KUKIFANYA?
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></title>
</head>
<body>
</body>
</html>
Most of tags nimezielezea tayari huko juu, so ili tusipoteze mda lets start coding...,tuna design simple web page using HTML kwanza:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Basic webpage</title>
</head>
<body>
<header>
<!--Beginning of navbar-->
<navbar>
<a href="home.index">HOME</a>
<a href="team_work.index">TEAM WORKS</a>
<a href="projects.index">PROJECTS</a>
<a href="contact.index">CONTACT</a>
<form action="search.index">
<input type="text" placeholder="search">
<button>Go</button>
</form>
</navbar>
<!--End of navbar-->
</header>
<!--Beginning of section-->
<section>
<ul>
<li>
<a href="">This is section's link</a>
</li>
<li>
<a href="">This is section's link</a>
</li>
<li>
<a href="">This is section's link</a>
</li>
<li>
<a href="HTML Reference">For more reference about html tags click here</a>
</li>
</ul>
</section>
<!--End of section-->
<!--Beginning of main content-->
<main>
<h1>This is Heading</h1>
<p>This is paragraph</p>
<p>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?</p>
<p>This is end of paragraphs</p>
</main>
<!--End of main content-->
<!--Beginning of footer-->
<footer>
<p>This is footer</p>
<p>©Copyright 2020 No body business.All right reserved</p>
</footer>
<!--end of footer-->
</body>
</html>
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
Pia kuna issue yoyote ambayo utahitaji nigusie kwenye huu uzi Ni Pm
Au nicheck via 0748333586
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
<html></html>
-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;
<title>Jamiipage</title>
-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
<!DOCTYPE> -Ina specify(bainisha) aina ya document(web page) yetu
<html> -Ina specify kuwa document yetu imeundwa kwa kutumia HTML
<head> -Hii hubeba taarifa za msingi kuhusu Document yetu
<title> -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?
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 web components ndizo tunazoziweka pamoja na kuunda web page yetu
Sasa HTML tags ndizo zinazotumika kuunda au ku design hizi web componets
CSS
Tunazoziunda kwa kutumia HTML
Mfano mzuri ni baada ya kujenga sasa nyumba yetu tunaipaka rangi
Hizo rangi sio part ya HTML ni CSS na tutaona jinsi gani hizi lugha mbili zinafanya kazi pamoja hivi punde
NINI TUNAENDA KUKIFANYA?
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></title>
</head>
<body>
</body>
</html>
Most of tags nimezielezea tayari huko juu, so ili tusipoteze mda lets start coding...,tuna design simple web page using HTML kwanza:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Basic webpage</title>
</head>
<body>
<header>
<!--Beginning of navbar-->
<navbar>
<a href="home.index">HOME</a>
<a href="team_work.index">TEAM WORKS</a>
<a href="projects.index">PROJECTS</a>
<a href="contact.index">CONTACT</a>
<form action="search.index">
<input type="text" placeholder="search">
<button>Go</button>
</form>
</navbar>
<!--End of navbar-->
</header>
<!--Beginning of section-->
<section>
<ul>
<li>
<a href="">This is section's link</a>
</li>
<li>
<a href="">This is section's link</a>
</li>
<li>
<a href="">This is section's link</a>
</li>
<li>
<a href="HTML Reference">For more reference about html tags click here</a>
</li>
</ul>
</section>
<!--End of section-->
<!--Beginning of main content-->
<main>
<h1>This is Heading</h1>
<p>This is paragraph</p>
<p>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?</p>
<p>This is end of paragraphs</p>
</main>
<!--End of main content-->
<!--Beginning of footer-->
<footer>
<p>This is footer</p>
<p>©Copyright 2020 No body business.All right reserved</p>
</footer>
<!--end of footer-->
</body>
</html>
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 kwa ufupi ni Hottest app development framework kwa sasa,ambayo itakusaidia ku create Mobile app ya ukubwa wowote ule kwa urahisi
Hii ni PHP framework kwa ajiri ya web development
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
