0 | P a g e

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.

7 | P a g e

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>

11 | P a g e

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 &nbsp; &nbsp; &nbsp; &nbsp;ABOUT US &nbsp; &nbsp; &nbsp;

&nbsp;PRODUCT &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; 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 &nbsp; ):-

HOME ABOUT US PRODUCTS CONTACT US

• Hata hivyo hapo baadae tutajifunza namna bora zaidi ya kutengeneza Menu bila kutumia &nbsp;

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 &nbsp; &nbsp; &nbsp; &nbsp;ABOUT US &nbsp; &nbsp; &nbsp;

&nbsp;PRODUCT &nbsp; &nbsp; &nbsp; &nbsp;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

Au tunandikie mbuketimes@gmail.com

---------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 Au tunandikie mbuketimes@gmail.com

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.

18 | P a g e

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 Ili kuweka list kama hiyo hapo juu , code yako itakuwa kama ifuatavyo:- <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 Ili kuweka list kama hiyo hapo juu , code yako itakuwa kama ifuatavyo:- <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.