Web developer swahili2

1 | P a g e
SOMO LA KWANZA : UTANGULIZI
Web programming au programming za aina nyingine ni ujuzi ambao unaweza kujifunza bila kuwa
na 'background' ya sayansi. Kinachotakiwa ni Kupenda (interest) na pia kujituma kukariri na
kufanya mazoezi ya kutumia 'codes'.
Nakualika wewe ambaye una interest ya kujifunza programming, uanze kujifunza HTML kwani
ndio programming language mama katika web site development.
Na ili uive vema katika kuunda website, Somo hili la kwanza litahusu kukupa ufahamu jinsi
Website zinavyofanya kazi, jinsi ambavyo utaweza kuanza kutengeneza website yako ya kwanza.
Fuatilia kwa umakini maelezo yote, na Jitahidi Ujibu maswali mwisho wa somo bila 'kugezea'.
1. HTML na Websites zinavyofanya kazi:
Websites ni mkusanyiko wa maandishi yaliyoandikwa kwa kufuata utaratibu maalum wa lugha za
maandishi zinazoweza kutafsiriwa na program maalum zinazoitwa Web browsers. Yaani
unapofungua website fulani, na kuona picha na maandishi, jua kuwa kuna zaidi ya hayo maandishi
na hizo picha unazoziona, kwamba nyuma ya hizo picha kuna mtiririko maalum wa kuwasilisha
hayo maandishi na picha zionekane kama unavyoziona.
Tips:
• Website ni kama kitabu, hivyo maandishi yake hugawanyika katika kurasa maalum, zenye
kubeba kusudio la kipekee kwa kila kurasa. Kurasa hizo huwa tunaziita WEB PAGES. Na
muaandaji wa website huwa na utaribu wa kila WEB PAGE, kuwa na FILE lake la KIPEKEE.
Na kwamba FILES zote za WEB PAGES, hukusanywa katika FOLDER MAALUM. Mfano
kutakuwa na FILE la Home Page, FILE la About US, File la Contact Us, n.k.
• Mfano wa we browsers ni Mozila Fire Fox, Internet Explorer, Safari, na Google Chrome
• Kuona Muonekano wa Website “Nyuma ya Pazia”- (Kuona maandishi ya jinsi website
ilivyoandikwa), tafuta sehemu isiyo na maandishi wala picha, kisha bofya kulia mwa
Mouse, kisha chagua PAGE SOURCE (Ukitumia Fire Fox). Ukiwa unatumia browsers
nyingine kama Internet Explorer angalia neno VIEW SOURCE.

2 | P a g e
• Web browsers zinatafsiri maandishi (text) na kuzirusha hewani, hivyo ni muhimu kila
unachoandikwa kiwe ni maandishi. Usijali, hata picha au video huwa zinawekwa kama
maandishi kwa kuandika tuu anuani ya wapi picha au video imehifadhiwa.
• Ili uweze kuandika hayo maandishi unahitaji kutumia lugha itakayoeleweka na browsers,
hivyo lugha ya kwanza tunayoenda kujifunza ni HTML.
2. HTML ni nini: HTML ni kifupi cha Hyper Text Mark Up Language. HTML ni lugha inayotumika
kuandika maandishi (text) ambapo hutafsiriwa na program maalum zinazoitwa Web browsers ili
kukupatia maelezo unayoelewa wewe kama mtazamaji wa website.
Tips:

3 | P a g e
• Kwa kuwa tunaenda kuandia maandishi tuu (text) ni muhimu kutumia program zinaweza
kuandika maandishi tupu, hivyo tunaenda kutumia program inayoitwa NOTEPAD.
• Program maalum zinazoandika maandishi tuu huitwa TEXT EDITORS. Mfano wa hizo ni
NOTEPAD, BLUEFISH EDITOR na NOTEPAD++.
• Kama unatumia Computer, waweza tumia tuu NOTEPAD.
• Kama unatumia SIMU, yenye kutumia android operating system. fungua hii link uone
baadhi ya TEXT EDITORS unazoweza kuinstall ili uanze kufanya HTML programming. TEXT
EDITORS KWA AJILI YA ANDROID
• Kama unatumia Iphone au IPAD, basi bofya hapa uweze kuona baadhi ya TEXT EDITORS
unazoweza kutumia.TEXT EDITOR KWA AJILI YA IPHONE NA IPAD
• Au bofya hapa TEXT EDITORS : IPAD & IPHONE
3. Hatua za Uandaaji wa Website:
• Kuandaa wazo na kubuni muundo wa website husika : Yaani website itahusu nini, itakuwa
na aina gani ya vitu (contents –picha, video, links na maandishi), muundo wa website
itakavyokuwa yaani itakuwa na kurasa ngapi, nini kitaanza, nini kitafuata, n.k. Katika hatua
hii ndipo pia unaamua JINA la website yako litakuwa lipi.
• Kuandaa maandishi ya website (content): Yaani kuandika maelezo yatakayoonekana katika
PAGES za website yako. Hapa unaandika Maelezo ya ABOUT US, maelezo ya CONTACT US,
maelezo ya OUR PRODUCTS, n.k. Katika hatua hii pia, unahitajika kuandaa Picha, Video, na
LINKS utakazotumia katika website yako.
• Kuundaa Website ( Website Development): Hatua hii inajumuisha kuandika maelezo, picha
, video, links katika muundo utakaoeleweka na web browsers. Hatua hii ndio ambayo
hutumia HTML, na lugha nyingine za uandishi kama vile CSS, JAVA , na JQUERY. Kwa
darasa hili tutajifunza HTML.
• Kuirusha hewani website: Baada ya kuwa imekamilika hatua ya tatu hapo juu, na kwamba
FOLDER la website yako kuwa lipo tayari , inabidi utafute wapi utai host website yako, ili
ulimwengu uweze kuiona. Ili uweze kuiweka hewani ( ku host) inabidi upate kampuni
itakayokufanyia kazi hiyo. Hata hivyo unahitaji kuwa na anuani maalum ya website yako.
Hivyo basi kuna haja ya kununua DOMAIN. Hili ni jina la kipekee litakaloitambulisha website
yako. Ukisha kuwa na Domain, pamoja na sehemu ya kuhost, basi umekamilisha kuirusha
hewani website yako. Itakupasa ufuate maelekezo ya jinsi ya kusave FOLDER lako katika
SERVER, ya huyo anaye host website yako.
Tip: WEB SERVER, ni kompyuta maalum inayofanya kazi ya kuhifadhi folders za website
mbalimbali, na kuwasilisha taarifa toka katika folders hizo, pale zinapohitajika na watumiaji wa
internet.
Ndio maana kuna wakati ukitaka kufungua website fulani unaambiwa SERVER is down, au
SERVER was not found, pengine SERVER imezimwa, au file unalotafuta limeondolewa toka katika
server husika.

4 | P a g e
MASWALI YA MARUDIO ( Points za Kuzingatia)
(i) HTML ni nini ?
(ii). WEBSERVER ni nini ?
(iii) WEBSITE ni nini ?
(iv) Je utaonaje maandishi ya jinsi website ilivyoandikwa (Source Code) ?
(v) TEXT Editor ni nini ? Toa Mfano wa Text Editor
(vi) WEB PAGE ni nini ?

5 | P a g e
SOMO LA PILI
Sehemu ya kwanza ya masomo haya ya WEB PROGRAMMING, tulijifunza mambo ya msingi
matatu:-
• Kwanza Nini Kinafanya Website ifanye kazi,
• Pili Programs Gani Unahitaji ili kufanya web programming na
• Tatu tulijifunza Hatua zinazofuata kuhakikisha website inakuwepo duniani.
Kama haukusoma sehemu ya kwanza ya mafunzo haya, tafadhali bofya hapa usome, kabla ya
kuendelea na hii sehemu ya pili.
Katika sehemu hii ya pili tunaenda kujifunza kwa undani, muundo wa ndani wa website. Hii ni
muhimu kwako kama programmer, kujua muundo wa ndani wa website kwani ndio ambao
utakuwa ukiutengeneza. Hivyo kabla ya kuanza kufanya programming – yaani kuutengeneza huo
muundo wa ndani , ni muhimu kujua vipengele vya huo muundo wa website.
1. Aina ya codes :
Codes ni alama na maandishi ya ziada yanayotafsiriwa na web browsers ili kuweza kukupatia
muonekano wa website kama ulivyokusudiwa na muandaaji wa website. Kwa maana nyingine,
codes ni maelekezo ya namna ambavyo kompyuta inatakiwa kufanya ili muonekano
uliokusudiwa na mtayarishaji wa website au program fulani.
Codes kwa ajili ya website huandikwa kwa kufuata utaratibu maalum, kuendana na aina ya lugha
inayotumika katika kutengeneza website. Baadhi ya lugha zinazotumika kutengeneza websites ni
HTML, CSS, JAVASCRIPT, PHP, JQUERY, PYTHON, PERL,RUBY na ASP.
Lugha hizo za web development, hutumika maalum kwa kutengeneza codes zenye kubeba kazi
maalu. Mfano JAVASCRIPT na JQUERY hutumika kufanya website iwe na mvuto zaidi kwa kufanya
vitu ambavyo havisubiri mtumiaji wa website, mfano kufanya picha zitembee, kupokea na kujibu
maelezo uliyojaza kwa fomu zilizopo kwenye website n.k
Mafunzo haya ya web programming yamejikita zaidi katika namna unavyoweza kutumia
lugha ya HTML, hata hivyo, nitakupa kwa uchache maelezo ya muonekano wa codes za CSS,
JAVASCRIPT, na JQUERY kwani codes zake hujumuishwa katika kutengeneza websites.
2. Muundo wa HTML
HTML ndio lugha mama katika kuunda website kwa kuwa yenyewe ndiyo inayoongeza mpangilio
wa website. Kwakuwa ndiyo muundo mama wa website, ni lazima kila website ifuate muundo
maalum ulioweka ambao ni huu:
DECLARATION (Maelezo kuwa unatumia aina gani ya HTML language:
<! DOCTYPE html>
OPENING HTML (Mwanzo wa Codes za website):
<html>

6 | P a g e
HEAD (Kichwa cha website):
<head>
</head>
BODY (Mwili au Website Yenyewe):
<body>
</body>
CLOSING HTML (Mwisho wa codes za website):
</html>
HIVYO KWA UJUMLA WAKE: Muundo wa website hufuata muonekano wa HTML Codes ndani ya
mfumo huu:-
<! DOCTYPE html>
<html>
<head>
Humu ndani ya head huweka maelezo ya ziada tutakayojifunza hapo baadae. Hata hivyo inafaa
kueleza kuwa codes nyingi za Javascript, CSS, na JQUERY huweka katika Head.
</head>
<body>
Humu ndani ya body, huweka maelezo (codes) zinazobeba muonekano wa website. Baadhi ya
codes za HTML ni kama <p> Habari yako</p>. Code hii hutumika kupanga muundo wa Aya
(paragraph) za website yako. Tutajifunza hapo baadae kuandika codes nyinginezo za HTML.
</body>
</html>
Angalia picha ya sehemu ya SOURCE CODE ya MBUKE TIMES katika ukurasa unaofuata,.
Kuangalia source code yote , fuata maelekezo yaliyopo katika SOMO LA KWANZA.

8 | P a g e
SOMO LA TATU
Katika somo hili la tatu, tunajifunza muundo wa codes za HTML ambazo utakuwa ukizitumia ili
kuunda websites mbalimbali.
Kabla haujaendelea na somo hili inakupasa utambue Website ni nini, TEXT EDITORS ni nini, HTML
ni nini, Muundo wa HTML ni upi, na jinsi ya kuangalia Source Code ya website. Waweza
kujikumbusha hayo kwa kusoma Somo laKwanza, na Somo la Pili.
1. Program tutakayoitumia:
Ili kufanya programming ya website tunahitaji Text Editor. Kwa ajili ya masomo haya nitatumia
NOTEPAD, ingawa unaweza kutumia Text Editors nyingine kadri upendavyo. Hata wale
mnaotumia smartphone au Ipad, mnaweza kudowload kwa mtandao Text Editor mnazopenda ili
kufuatilia vema masomo haya.
Kufungua Notepad, nenda Start Menu, kisha All programs, halafu ACCESSORIES. Hapo chagua
Notepad.
Pia waweza fungua notepad, kwa kubofya kulia mwa Mouse, ukiwa Desktop, kisha bofya NEW,
halafu chagua Text document.
2. Maneno ya msingi katika HTML:
HTML Tags: Ni alama na herufi ambazo tutazitumia kutoa maelekezo kwa kompyuta ili ifanye
vile tunavyotaka. Mfano wa tags ni :Paragraph tag : Hii ni tag tunayotumia kuweka muundo wa
aya kwa website. Tags nyingi huwa na mwanzo wake mfano <p> na mwisho lazima ifungwe
</p>. Yaani unafunga kwa kutumia herufi hiyo hiyo uliyotumia kufungua.

9 | P a g e
Mifano mengine ya tags ni <a>….</a>, <b> ….</b> na <table>…..</table>.
HTML Elements: Kwa mujibu wa W3 Schools , HTML element ni alama na maelezo yote
yanayopatikana kuanzia mwanzo wa tag, hadi pale tag inapofungwa.
Mfano: <p align=”justify”> Hii yote ni HTML element </p>.
Kuna wakati HTML Element, huwa na zaidi ya tag ya aina moja. Mfano
<p><a href="http://conversations.nokia.com/2013/07/12/10-reasons-to-get-excited-about-the-
nokia-lumia-1020/" target="blank">Ifahamu simu mpya yenye MEGAPIXEL 41</a></p>
Tip: Muonekano wa HTML element hufuata tag ipi imeanza. Hivyo element hapo juu imebeba tag
ya paragraph, na pia tag ya kuweka link. Kwakuwa tumeanza na paragraph <p>, basi lazima
tufunge na </p>. Hata hivyo kabla haujafunga tag ya mwanzo ni lazima kwanza ufunge tags zote
zilizopo katikati. Mfano kabla ya kufunga hiyo </p>, tumefunga kwanza tag ya link </a>.
HTML Attributes: Ni sehemu ya HTML element inayotoa maelezo au maelekezo ya ziada ya jinsi
tag inavyotakiwa kutafsiriwa na website. Mfano tunataka kuandika paragraph katika website yetu,
tutatumia tag ya <p> Maelezo Yetu Hapa</p>,
Hata hivyo, kama tunataka kutoa maelekezo zaidi ya muonekano wa paragraph hii, basi
tutaongeza maelekezo hayo ndani ya tag ya kufungua. Yaani mfano tunataka Paragraph hiyo ikae
katikati, tutaandika element yetu hivi
<p justify=”centre”>Maelezo Yetu Hapa </p>. Kwa mfano huu attribute ni JUSTIFY=”CENTRE”.
Kumbuka:
• Ni vema kutumia aina moja ya maandishi katika tag zako–kama ni herefi kubwa kwa tag ya
kufungua, basi na kufunga pia iwe hivyo hivyo. Kama ni ndogo hali kadhalika. Hata hivyo
inashauriwa kutumia herufi ndogo zote unapoandika HTML tags.
• Attribute ni sehemu ya Element. Tags ni sehemu ya Element pia.
• Elements zote kwa pamoja ndio huunda CODES . Hivyo kwa maana nyepesi , unapofanya
programming, ni kuwa unaandika kwa mpangilio sahihi, elements mbalimbali ili kuleta
tokeo fulani la website iliyokusudiwa.
• Baadhi ya HTML elements hazina tags za kufunga, mfano <br>, kwa ajili ya kuweka nafasi
toka neno na neno (kama unavyotumia space bar kwa keyboard. Hii huandikwa bila kuwa
na </b>.
MASWALI YA MAZOEZI
1. Tag ni nini ?

10 | P a g e
2. Je kuna tofauti gani kati ya HTML Element na HTML Atribute ?
3. Fungua Notepad, kisha andika mfufulizo wa HTML elements zifuatayo: Ukishaandika hayo, save
kwa jina la index.html Kisha funga hiyo program ya Notepad. Nenda sehemu ulipoisave hii kazi,
DOUBLE CLICK, ili ifunguke kwenye web browser kama website.
Angalia picha hapo chini:-
<!DOCTYPE html>
<html>
<head>
<title> WEBSITE YANGU</title>
</head>
<body>
<p> Hii ni website yangu ya kwanza</p>
<p> Ninapenda sana kujifunza programming</p>
<h3>Nitafurahi nikiweza</h3>
</body>
</html>

12 | P a g e
SOMO LA NNE
WEBSITE YAKO YA KWANZA
Mpaka sasa kwakuwa umefuatilia somo la 1, la 2 na la3, unatambua vema muundo wa ndani wa website, kupitia
HTML. Kama haujasoma somo la 1, la 2 na la 3, tafadhali BOFYA HAPA kupata masomo hayo.
Muundo wa HTML ni :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Katika somo hili tunaanza kuutumia muundo huo kutengeneza website yako ya kwanza. Hivyo fungua NOTEPAD au
TEXT EDITOR yoyote unayotumia, kisha copy & paste muundo huo wa HTML hapo juu, kwani kila code tunayoenda
kuandika inategemea muundo huo.
1.Jina linaloonekana juu ya window : Mtu anapofungua website yoyote huona jina juu ya ufito wa mwanzo wa
window ya website husika. Hii tunaita TITLE. Kumbuka jina hili linaweza kuwa tofauti kabisa na jina halisi la website.
Mfano TITLE la website yako inaweza kuwa KARIBU WEBSITE YANGU. Wakati jina la website yako likawa WEBSITE
MAKINI.
Kuandika title, huwa tunatumia HTML tag <title>, ni muhimu kufungua tag hii kwa </title>. Sehemu katika Muundo
wa HTML ambapo tunaenda kuandika TITLE ni katikati ya <head> na </head> tags. Hivyo nenda hapo na kuandika
title ya website yako.

13 | P a g e
Mfano :
<head>
<title> KARIBU WEBSITE YANGU</title>
</head>
2.Jina la Website Yako
Jina la website yako huwa sehemu ya ‘Mwili’ wa website yako, hivyo kuandika jina itabidi uende katika ya <body> na
</body> tags, kisha uandike hapo.
Kwakuwa jina ni kama kichwa cha habari, ungependa utumie maandishi makubwa. Hivyo tag tutakayotumia ni <h1>
ambayo hufungwa kwa tag </h1>.
Mfano:
<body>
<h1> WEBSITE MAKINI TANZANIA</h1>
</body>
Tips:
• Zipo tags za aina tofauti za Heading, kuandika h1, h2, mpaka h6. Kadiri namba inavyozidi kuwa kubwa ndivyo
ukubwa wa maneno unavyopungua. Hivyo kwakuwa tunataka maandishi makubwa katika kichwa chetu cha
habari tumetumia h1. Kama tungetaka maandishi madogo zaidi tungetumia <h6> …</h6>.
• Kila maandishi tunayoandika katika website yetu yatakaa kushoto mwa website. Hivyo kama ungependa
kubadilisha ‘mlalo’ yaani alignment ya maandishi inabid kutumia “attribute”. Kumbuka attribute ni Maelezo
ya ziada ndani ya tag, yanayotoa maelezo ya ziada kuhusu muonekano wa kinachotakiwa kuonyeshwa kwa
mtumiaji wa website.
• Hivyo kama tungetaka kuweka kichwa cha habari chetu kiwe katikati, tutaandika hivi. <h1
style="text-align:center">WEBSITE MAKINI TANZANIA<h1>
• Kumbuka attribute huwekwa ndani ya tag ya kufungua yaani katika mfano huu ni <h1>. Na hapa jina la
attribute ni style, halafu ni lazima uweke =, na maelekezo huwa yanaweka alama ya kufungua na kufunga
usemi yaani “ na “. Pia tambua kuacha nafasi moja toka tag na attribute, yaani <h1 sytle….>
• Jaribu kubadili neno center, na kuandika right, uone, kichwa chetu cha habari kitakaa Kulia mwa website.
3. Kuandika Menu ya Website Yako
Mfano ungependa kuwa na menu HOME, ABOUT US, PRODUCTS na CONTACT US.
Kwakuwa Menu hii itaonekana chini ya Jina la website, code yetu ya kuandika Menu hii itaenda pia chini ya code
tuliyoandika kichwa cha habari. Hivyo code yetu itakuwa hivi:
<body>

14 | P a g e
<h1 style="text-align:center"> WEBSITE MAKINI TANZANIA</h1>
<h4 style="text-align:center" > HOME        ABOUT US      
 PRODUCT        CONTACT US</h4>
</body>
Tips:
• Katika code hiyo hapo juu tumetumia <h4> ili kuyapa maneno ukubwa fulani. Kumbuka maelezo ya mwanzo
hapo juu kuhusu tags za <h1> mpaka <h6>.
• Pia tumeweka alignment katikati kwa kutumia Style attribute.
• Halafu ili kuacha nafasi mbili kati ya neno na neno tumetumia ‘special character’ iitwayo entity, ambayo ni
  Inasomeka NON BREAKING SPACE. Tambua kuwa web browser kama haujaweka hiyo alama kwa
idadi unayotaka, web browser huacha nafasi moja tuu toka neno hadi neno. Hivyo menu yetu ingeonekana
hivi;
HOME ABOUT US PRODUCTS CONTACT US
Wakati sie tunataka iwe kama hapa chini kwa kuacha nafasi nne. (Hesabu hizo   ):-
HOME ABOUT US PRODUCTS CONTACT US
• Hata hivyo hapo baadae tutajifunza namna bora zaidi ya kutengeneza Menu bila kutumia  
4. Kuandika Maelezo Ya Website Yako
Ok, sasa website yako ipo tayari na tunataka kuwaeleza kwa ufupi kuhusu website yako. Tunafanya hivi kwa
kuandika aya fulani. Kumbuka maelezo haya yanakuja chini ya Menu hivyo tunaandika:
<body>
<h1 style="text-align:center"> WEBSITE MAKINI TANZANIA</h1>
<h4 style="text-align:center" > HOME        ABOUT US      
 PRODUCT        CONTACT US</h4>
<div>
<h3> Karibuni Sana</h3>
<p> Hapa unapata maelezo ya uhakika kuhusu nchi ya Tanzania.
Tegemea Kuburudika, Kujifunza na Kunufaika wewe na Familia Yako.
Kama haunufaiki, tafadhali tueleze</p>
<p> Tafadhali mtaarifu na mwingine apitie website yetu. Atakushukuru daima</p
Kwa maelezo zaidi wasiliana nasi kwa namba zetu hizi:778877777
Au tunandikie mbuketimes@gmail.com
</div>
</body>

15 | P a g e
Tips:
• Hapa nimekutambulisha tag inayoitwa DIV TAG. Kumbuka <div> tag hutumika kuweka au kuunda makundi ya
maelezo katika website yako, ili kufanya urembaji na muonekano wa website yako uwe rahisi. Tutajifunza
zaidi jinsi ya kutumia <div> tag katika somo la TANO.
• Kumbuka <h3> ni mojawapo ya Heading tags kama tulivyoeleza hapo mwanzo.
• Paragraph tag yaani <p> hufanya kazi ya kufanya maelezo yote ndani ya hiyo tag yawe ni sentensi moja.
Angalia vizuri picha ya codes za website yetu, utagundua maelezo ya <p> tag ya kwanza yapo katika sentensi
tatu, hata hivyo web browser inatambua kuwa yote ni sentensi moja kwani yapo ndi ya tag moja.
• Na pia matumizi ya <p> tag yanafanya sentensi zilizo ndani ya hiyo tag kuachana kwa nafasi moja.Hivyo kama
haujatumia tag, yoyote maelezo yako katika aya zako mfano maelezo haya yafuatayo hayaonekani
ukiangalia katika web browser, ingawaje yapo katika document yetu:-
Kwa maelezo zaidi wasiliana nasi kwa namba zetu hizi:778877777
---------MWISHO WA SOMO LA NNE.---------
ZOEZI: HAKIKISHA UMEANDIKA NA KUSAVE kama index.text, CODES ZOTE KAMA TULIVYOELEKEZA HAPO JUU ,
KISHA SAVE FILE LAKO KAMA index.html. HIVYO utakuwa na mafaili mawili moja ni index.html, na linguine ni
index.text
Nenda sehemu uliposave index.html , kisha li double ili kuangalia website yako inavyoonekana sasa kwa mtandao.
Hakikisha muonekano wa code yako unaonekana hivi.

16 | P a g e
SOMO LA TANO
MATUMIZI YA TAG YA <DIV> NA <IMG>
Katika la 4, tulijifunza jinsi ya kufanya maandishi yaonekane katika website. Cha kukumbuka kuwa ni
kwamba maandishi yote tunayotaka yaonekane kama 'mwili' wa website yetu ni lazima yawe ndani ya tags
za <body>....</body>.
Tuliona pia kama tukiandika maandishi katika Text Editor bila kutumia tag yeyote maandishi hayo
hayotoonekana katika web browser. Hivyo basi tukajifunza kuwa ili kuandika maandishi inabidi kutumia
Heading tags <h1> mpaka <h6>, au kutumia Paragraph tag <p>.
Somo hili la tano litahusu DIV TAG na IMG TAG,
1. DIV TAG
Mwisho wa somo la 4, nilikupa utangulizi wa tag inayoitwa DIV TAG. <div> tag hutumika kuweka
makundi tofauti tofauti ya maelezo ili kurahisisha muonekano wa maarifa kwa kila kundi. Kwa maana
rahisi, <div> tag inakurahisishia kwa kugawa makundi hayo katika aya.
Mfano:
Fungua katika Notepad, document uliyotumia kutengeneza website katika Somo la 4. Kama haukufanya
Zoezi nililoacha katika Somo la 4, tafadhali fanya kabla ya kuendelea na somo hili. Ok, ukifungua document
yako index.text, nenda kati kati ya <body> na </body>, tafuta code hii
<p> Tafadhali mtaarifu na mwingine apitie website yetu. Atakushukuru daima</p>
Chini ya hiyo code andika code ifuatayo:
<div style="color:blue;text-align:center">
<p> Kwa maelezo zaidi wasiliana nasi kwa namba zetu hizi:778877777</p>
<p>Au tunandikie mbuketimes@gmail.com<br>P.o.box 111 Dar es salaam<br>Tanzania, Afrika
Mashariki</p>
</div>
<div style="color:red;background-color:yellow">
<h5>Karibu Sana Hapa</h5>
Usisahau Ku Like Page yetu ya Facebook
</div>
Tips:
• Tazama Div tag ya kwanza yenye maelezo haya:-
Kwa maelezo zaidi wasiliana nasi kwa namba zetu hizi: 778877777

17 | P a g e
P.o.box 111 Dar es salaam
Tanzania, Afrika Mashariki
Utaona kuwa, tumeweka rangi ya maandishi kuwa ni blue, tofauti na div inayofuata. Pia maneno hayo hapo
juu tumeagiza yakae katikati mwa kurasa ya website. Wakati Div tag inayofuata haina maelekezo hayo.
• Pia ukitazama hiyo div tag ya kwanza nimekupa muonjo wa tag inayoitwa LINE BREAK TAG,
yaani <br>. Tag hii, haina cha kufungia yaani huwa hatuna </br>. Kazi yake ni kuamrisha web
browser kuacha nafasi moja toka sentensi na sentensi.
• Utagundua kuwa ukitumia heading tag, paragraph tag, au div tag, web browser zinaacha nafasi mbili
za mistari toka sentensi moja na sentensi nyingine. Hata hivyo, kwa kupitia <br> tag, tunaweza
kufanya nafasi kati ya sentensi na sentensi kuwa ni moja ( kwa kiingereza tunaita single line break).
• Ukiangalia div tag ya mwisho yenye maelezo:
Karibu Sana Hapa
Usisahau Ku Like Page yetu ya Facebook
Utagundua yafuatayo:-
Kwakuwa hili ni kundi linalojitegemea, tumeweza kuamrisha liwe na background color tofauti na makundi
mengine ya maandishi. Hii ni faida ya <div> tag kwani background color imeenda kwa kundi hili tuu.
Pia kwakuwa tayari tuna <div> tag, sio lazima kutumia heading au paragraph kama lengo letu ni kuweka tuu
maandishi. Utaona sentensi ifuatayo imeandikwa bila kuzungukwa na tag maalum.
Usisahau Ku Like Page yetu ya Facebook, haina
2. IMG TAG: Kuingiza Picha Katika Website Yako
Ili kuingiza picha katika website yako, unatakiwa kufanya yafuatayo:-
Kwanza kama unataka kuingiza picha ambayo ipo katika computer yako, hakikisha kuwa picha husika ipo
kwenye folder moja ambalo pia umeweka file la website yako. Mfano ili kuingiza picha katika website yetu
ya kwanza, tunaenda kutengeneza folder tutakaloliita NewWEB. Halafu tunaingiza picha moja humo
pamoja na file letu la index.text.
Kwa mfano, picha ninayoiweka nimeisave kwa jina la rainbow.jpg
Tag tunayoitumia kuingiza picha katika website ni <img src=" Hapa unaandika jina la file la picha "> tag.
Ambayo haina cha kufungia, yaani haina </img>.
Hivyo basi kuingiza picha tunachagua wapi tunataka picha ikae kisha tunaweka code hii:-
<img src="rainbow.jpg">
Katika Somo la SITA tutajifunza zaidi jinsi ya 'kucheza' na picha katika website, mfano kurekebisha
ukubwa, urefu au ufupi wa picha, kubadili wapi picha ionekane - katikati, au kulia, n.k.
ZOEZI
Hakikisha umesoma somo hili la tano kwa ufasaha, na umeandika Codes zote kwa ufasaha. Tazama hapa
chini jinsi file lako linavyotakiwa kuwa ndani ya NOTEPAD. Save kazi yako kisha double click ili
kuliangalia katika web browser.
Angalia Code hapa chini jinsi document yako itakavyokuwa ukimaliza kuingiza codes zote kama
ilivyoelezwa hapo juu.

19 | P a g e
SOMO LA SITA
MAELEZO YA ZIADA KUHUSU KUWEKA PICHA KWA WEBSITE YAKO
Mpaka sasa unafahamu vema kupitia masomo yaliyopita jinsi HTML tags zinavyofanya, na muundo mzima
wa website. Tupo katikati sehemu ya <body>....</body> ambapo ndio hujazwa codes za kuleta muonekano
wa website.
Katika body, ndipo pia utaweka picha au video kadri upendavyo. Katika hili la sita tunaangalia kwa undani
sio tuu jinsi ya kuingiza picha bali kuziweka katika muonekano bora ili kupendezesha website yako.
1. Kuweka Picha
Tuliona katika somo la nne , HTML tag inayotumika kuingiza picha ni <img src="">. Tag hii haina cha
kufungia, yaani hatutumii </img>. Mfano ili kuingiza picha katika website (zoezi la somo la tano), tuliona
kuwa tulitumia code hii <img src="rainbow.jpg">.
Neno img linamaanisha Image (yaani picha), halafu neno src linamaanisha Source (Chanzo/wapi picha ilipo)
hivyo src huwakilisha anuani ya wapi picha ilipo.
Kuna namna mbili za picha unazoweza kutumia kwa website yako:-
• Picha iliyopo katika mtandao: Kutumia picha iliyopo katika mtandao ni muhimu kuandika address
yote kamili ya wapi picha ilipo. Mfano:
http://www.nationalgeographic.com/adventure/images/0611/tanzania.jpg
Ili kusoma anuani ya picha iliyopo internet, unachotakiwa kufanya ni kuenda mpaka kwenye picha husika,
kisha right click picha husika, na chagua (click) copy image location.
Ukisha bofya copy image location, nenda sehemu yako ya img tag yako kisha right click mouse, na kubofya
Paste. Matokeo yake ni kuwa na code kama hii:-
<img src="http://www.nationalgeographic.com/adventure/images/0611/tanzania.jpg">
• Picha iliyopo katika computer yako: Kwa picha iliyopo katika computer yako, hakikisha kuwa ipo
katika folder moja ambalo text document unayotumia kuandika code ya website yako pia imo.
Mfano kama umetengeneza folder na kulipa jina NewWeb, basi hakikisha picha na text file vimo
humo vyote. Kisha nenda kwa hilo folder na kusoma jina la picha. Hakikisha umetambua jina kamili

20 | P a g e
pamoja na 'extension' ya file husika. Yaani kama jina ni rainbow.jpg, basi utatakiwa uandike jina hilo
lote kama lilivyo.
Extension ni vifupi vya maneno vinavyotambulisha aina ya picha - mfano gif, jpg na png
Hivyo kwa picha yetu yenye jina rainbow.jpg, tutaiingiza kwa code ifuatayo:-
<img src="rainbow.jpg">
2. Jinsi ya kubadili urefu na upana wa picha:
Ni rahisi sana kubadili urefu na upana wa picha yako, unachotakiwa kufanya ni kuingiza katika img tag,
maneno height (Urefu) na width (Upana) kama hivi:
<img src="rainbow.jpg" height="200" width="300">
3. Jinsi ya Kubadili Mahali picha ilipo:
Matoleo yaliyopita ya HTML mfano HTML 4.1 iliruhusu kubadili muelekeo kwa kutumia Attribute ya
Align. Mfano tungeandika code yetu hivi ili kufanya picha yetu ikae katikati ya website yetu:
<img src="rainbow.jpg" height="200" width="300" align="center">
Hata hivyo kwakuwa tunajifunza HTML programming kwa ngazi ya juu kabisa kwa sasa yaani HTML 5,
hatutakiwi kutumia hiyo attribute ya align. Badala yake tunatakiwa kutumia CSS, kama hivi:-
<img src="rainbow.jpg" height="300" width="300" style="float:right" >
Maelezo zaidi kuhusu HTML 5, na CSS yatakujia katika masomo yatakayofuata. Lengo la somo hili
lilikuwa ni kukuwezesha kuingiza picha vema, kubadili ukubwa wake, na kuhakikisha unaiweka picha
katika sehemu uliyokusudia kama ni kati kati,ama kulia.

21 | P a g e
SOMO LA SABA
JINSI YA KUINGIZA LINKS KWA WEBSITE
Ni matumaini yangu kuwa umesoma masomo yaliyopita yaani somo la kwanza mpaka la sita.
Mpaka sasa unaweza kuandika codes zinazohusiana na Aya (paragraph), Vichwa vya habari (headings),
unaweza kubadilisha rangi ya maandishi katika website yako, unaweza pia kuweka maandishi yako popote
unapotaka katika website yako iwe kulia, katikati au kushoto.
Pia unaweza kuingiza picha katika website kwa kutumia tag ya IMG, unaweza pia kutumia attributes
mbalimbali zinazoendana na IMG tag kama vile kubadilisha urefu au upana wa picha.
Katika somo hili la saba, tunaangalia namna ya kufanya website yako iwe na LINKS mbalimbali.
1. Link tag :
Ili kuweka lins katika website yako ni muhimu kukumbuka kutumia tag hii <a href=" "> na kifunga chake
</a>
Neno href linamaanisha hyper link reference, yaani hapa ndipo unapoweka address ya link unayotaka.
Mfano kama tunataka kuweka link ili mtu akiibofya hiyo link aipate blogu ya Mbuke Times, tutaweka hivi:-
<a href="http://mbuke.blogspot.com">BOFYA HAPA</a>
Tips:
Katika link hii kuna mambo kadhaa ya kukumbuka:
Kama unatumia link toka nje ya website yako, ni lazima kuandika address yote kamili, yaani ni lazima
address ya link ianze na http://..
Kumbuka kuzungushia address ya link, alama za kufungua na kufunga usemi , yaani " "
Baada ya kuweka link, ifunge hiyo a, kisha katika ya <a> na </a> unaandika maneno ambayo unataka mtu
ayaone na kuyabofya ili link ifunguke.
2. Kufungua link katika tab nyingine
Link tuliyotengeneza hapo juu husababisha ukurasa ambao mtumiaji wa website anautumia kufungwa , ili
kufungua ukurasa wenye link husika.
Hata hivyo kama hautaki ukurasa aliopo mtumiaji kufungwa, unachoweza kufanya ni kuandika attribute
inayoelekeza link ifunguke sehemu nyingine.
Attribute tunayoitumia inaitwa target attribute.
Mfano
<a href="http://mbuke.blogspot.com" target="_blank">BOFYA HAPA</a>
Hiyo target ya "BLANK" ndio inayofungua ukurasa wenye link yetu , kwa tab mpya.

22 | P a g e
Zoezi:
Fungua katika notepad au text editor yoyote unayotumia, endelea katika website yako uliyoandika kupitia
somo la 6, kisha andika code itakayoweka link ya website ya Serikali, Website ya Google, na Website ya
Facebook.
Kisha save na kuangalia website yako inavyoonekana baada ya kuweka links hizo.

23 | P a g e
SOMO LA NANE:
LISTS
Kuna nyakati unaweza kujikuta ukihitaji kuweka orodha ya vitu mbalimbali katika website yako, mfano:
Hawa ndio wanamuziki ninao wafagilia:-
1. Bob Marley
2.R.Kelly
3. Madee.
Huo ni mfano mmoja wapo wa orodha (LIST). Unaweza jiuliza kama unaweza kuandika namba tuu basi
kuna haja gani ya kujifunza kuweka LISTS. Hata hivyo utakubaliana nami kuwa LISTS zikiwekwa kwa
utaratibu unaoenda kujifunza hapa, huwa zimejipanga vema zaidi kuliko wewe kulazimisha kuweka lists
kwa kuandika.
Ili kuweka list huwa tunatumia tag tofauti kwa kila aina ya list unayotaka kuweka. Tuangalie Aina hizo:-
1. Unordered list: ( <ul>)
Hii ni orodha isiyokuwa na namba, mara nyingi huwa na bullets za mduara kama hivi:
• Home
• About Us
• Contact Us
Ili kuweka list kama hiyo hapo juu , code yako itakuwa kama ifuatavyo:-
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>

24 | P a g e
TIPS:
Ili kuweka unordered list tunatumia tag ya <ul> ambayo hufungwa kwa </ul>.
Hakikisha vyote unavyotaka kuwa katika list hiyo kuwa ndani ya tag ya <li> inayofungwa na </li>.
Unatumia tag hii kuorodhesha kitu kimoja kimoja.
2. Ordered list: ( <ol>)
Hii ni orodha ambayo huwa na namba. Mfano
1.Ujenzi
2.Uvuvi
3.Kilimo
<ol>
<li>Ujenzi</li>
<li>Uvuvi</li>
<li>Kilimo</li>
</ol>
3. Description List: ( <dl>)
Hii ni orodha ambayo huwa kwa mfano huu:-
Nchi na miji yake Mikuu
Tanzania
-Dodoma
Uganda
-Kampala
Kenya
-Nairobi
<dl>
<dt>Tanzania</dt>
<dd> Dodoma</dd>
<dt>Uganda</dt>
<dd> Kampala</dd>
<dt>Kenya</dt>
<dd>Nairobi</dd>
</dl>
TIPS:
Hakikisha orodha zako zote zimeingia ndani ya <dl> ambayo inafungwa na </dl>
Pia kwa kila kitu kikuu mfano Tanzania, tumia tag ya <dt>, halafu kilichopo ndani ya Tanzania ndio
unatumia <dd>
Hakikisha unatumia vifungua na vifungua tag vyote.
DOKEZO: Ufahamu kuhusu lists ni muhimu sana katika kutengeneza MENU au NAVIGATION BAR
katika website yako. Mfano Menu katika blog hii hapo juu yaani HOME, DARASA, n.k, imetengenezwa
kwa kutumia HTML list tags.
ZOEZI: Kwa wakati wako andika list mbalimbali katika file la website ambalo unalitumia kujifunza,
nilipendekeza usave kazi zako zote katika file ulilolipa jina index.html
Ukishaandika hizo lists zako, save, kisha fungua file hilo katika browser ili kuona muonekano wa hiyo
website yako , baada ya kuwa umeweka lists.

25 | P a g e
SOMO LA TISA
TABLES ( MAJEDWALI KATIKA WEBSITE)
Kuna wakati unaweza kutaka kuandika jedwali (Table) katika website yako. Ili kufanya hivyo inabidi
utumie tag ya <table> yenye kufungwa </table>.
La msingi kukumbuka katika tag hii ni kuwa inazo tag nyingine zinafuata, yaani : <tr> ifungwayo kwa </tr>
Na tag <td> ifungwayo kwa </td>.
Tazama table ifuatayo
Yule na Huyu Yeye na Wao Wewe na Mimi
Mbuke Times Tanzania Yetu
Kisha angalia code iliyounda table hiyo hapo juu:-
<table border="2">
<tbody>
<tr>
<td>Yule na Huyu</td>
<td>Yeye na Wao </td>
<td>Wewe na Mimi</td>
</tr>
<tr>
<td>Mbuke Times</td>
<td>Tanzania Yetu</td>
</tr>
</tbody>
</table>
Umegundua nini ? Haya ndio ya kutambua katika uandishi wa table:-
1. Ndani ya tag ya table kuna attribute ya border, ambayo inafanya kazi ya kuweka ukubwa wa mstari wa
table yetu. Unaweza badili namba kwa kadri utakavyo.
2. Katika tables tuna rows na columns. Ili kuunda rows unatumia tag ya <tr> na </tr>. Mfano Row ya
kwanza inayoundwa na maneno haya YULE NA HUYU, YEYE NA WAO, WEWE NA MIMI, maelezo
hayo yote yamo ndani ya <tr>.....</tr> ya kwanza. Angalia vizuri utaona kuna <tr> ....</tr> nyingine. chini
yake.
Ili kuunda columns tunatumia hiyo tag ya <td>.....</td>, mfano ili kuunda column ya kwanza tumetumia
<td> kwa maneno haya Yule na Huyu. Na ili kuunda column ya pili tumetumia <td> kwa maneno Yeye na
Wao.
Ili kuendeleza ukubwa wa columns, unaongeza <td> katika row inayofuata. Hivyo basi utaona nimeongeza
<td> katika <tr>...</tr> ya pili.
Hata hivyo chini ya column ya tatu kwa row ya kwanza yaani chini ya Wewe na Mimi, sijaweka column,
kwakuwa <td>...</td> ni mbili tuu, wakati row, ya juu ya kwanza ina tags hizi za <td>...</td> tatu.
Tag hii <tbody> inafanya kazi ya kuonyesha mwanzo na mwisho wa table yako.
Natumaini umejifunza vyema kuhusu table. Endelea kufuatilia hapa MBUKE TIMES ujifunze zaidi, kadri
siku zinavyoenda.
Huu ni utangulizi tuu wa masomo ya Web programming. Kwa masomo zaidi na maelekezo bora zaidi,
jiandikishe kupata masomo hayo na msaada wa moja kwa moja toka kwangu.

Web developer swahili2

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Web developer swahili2